0

maybe I`m trying something totally wrong but I want for example move my toolbar content to my own component. Before:

 <td-layout-nav navigationRoute="/">
        <div td-toolbar-content layout="row" layout-align="start center" flex>
            <button mat-icon-button td-menu-button tdLayoutToggle>
                <mat-icon>menu</mat-icon>
            </button>
            <td-search-box class="pad-top-xs" backIcon="search" placeholder="Search here" [showUnderline]="false" [debounce]="500" [alwaysVisible]="false">
            </td-search-box>
            <button mat-button [matMenuTriggerFor]="menu">Menu</button>
            <mat-menu #menu="matMenu">
                <button mat-menu-item>Item 1</button>
                <button mat-menu-item>Item 2</button>
            </mat-menu>
            <a mat-icon-button matTooltip="Docs" [routerLink]="" href="https://teradata.github.io/covalent/" target="_blank">
                <mat-icon>chrome_reader_mode</mat-icon>
            </a>
        </div>

and my goal is something like
        <td-layout-nav navigationRoute="/">
            <my-own-toolbar-component></my-own-toolbar-component>

The problem now is my layout is getting "destroyed" enter image description here

That's because the content is now surrounded by an additional div from the component selector. But is there a possibility to overcome this? Or is my goal totally wrong? Here is a forked Stackblitz that shows my problem.

Stackblitz

Sebastian
  • 952
  • 1
  • 14
  • 41
  • What's 'your own component'? What are you exactly trying to do? Can you be more specific? – Roysh Apr 01 '18 at 16:29
  • I try to move the whole code for the toolbar to an own component, like putting all the html for the toolbar and put it in a "wrapper" component – Sebastian Apr 01 '18 at 16:32
  • So from what I understand - you have an angular component, and you have copied a code of toolbar and put it in its view? – Roysh Apr 01 '18 at 16:34
  • yes thats is it – Sebastian Apr 01 '18 at 16:38
  • Well first - what exactly is being destroyed? Second - if you pushed some html code to your view, you should make sure that you've also added its CSS. – Roysh Apr 01 '18 at 16:40
  • Look at the screenshoot or the stackblitz example, the problem is not css its the additional div that is generated from the selector of the component – Sebastian Apr 01 '18 at 16:41
  • what's your component selector name? can you publish the code of your `component.ts` file? – Roysh Apr 01 '18 at 16:42
  • in the stackblitz you see the topbar.component – Sebastian Apr 01 '18 at 17:10
  • I see you have app-topbar. To what component would you like to move it? – Roysh Apr 02 '18 at 05:28

1 Answers1

1

This can be done by using the td-toolbar-content attribute on your component.

<td-layout-nav navigationRoute="/">
    <my-own-toolbar-component td-toolbar-content></my-own-toolbar-component>
    ...
</td-layout-nav>
Chic
  • 9,836
  • 4
  • 33
  • 62