Breaking the App component html in to multiple components

[haseeb200]

I am trying to break the app.component.html into multiple Angular 2 components like header, footer, sidenav and main content. But I am unable to render the final HTML.

I am using the following starter template for my application.

https://stackblitz.com/edit/covalent-contacts-template

I want to move the header area into header components likewise footer, sidenav and main content. For example

app-header will contain header html app-footer will contain footer html app-sidenav will contain sidenav html

header.component.html

`<div td-toolbar-content layout="row" layout-align="start center" flex>
  <button mat-icon-button class="td-menu-button" (click)="sidenav.toggle()" mdTooltip="Main menu">
    <mat-icon>menu</mat-icon>
  </button>
  <mat-icon class="mat-icon-logo" svgIcon="assets:covalent"></mat-icon>
  <span>Contacts</span>
  <span flex></span>
  <button mat-icon-button><mat-icon>apps</mat-icon></button>
  <button mat-icon-button><mat-icon>notifications</mat-icon></button>
  <button mat-icon-button><mat-icon>account_circle</mat-icon></button>
</div>`

header.component.ts ` import { Component, OnInit } from '@angular/core';

@Component({ selector: 'scorm-header', templateUrl: './header.component.html' }) export class HeaderComponent implements OnInit {

constructor() { }

ngOnInit() { } }`

when I use the scorm header selector in the main app.componenet.html file the header doesn't show up. It gives me blank header with blue background

when I do these my templates behave differently like toggling function stops working, the layout gets disturbed.

[kyleledbetter]

The header and footer is already built in functionality in our layouts components. Check out all the examples and docs in https://teradata.github.io/covalent/#/layouts

[ammar91]

@kyleledbetter Is there a way to move those header and footer contents to a separate file just to organize things little more clean instead of having header, footer and main content in a single file

[ammar91]

@kyleledbetter Please see https://stackblitz.com/edit/covalent-contacts-template-zddjz8

Header related content move to header.component and reference it in app.component the header doesn't show up. It gives blank header with blue background

[kyleledbetter]

yes we have all the flexibility you need

You can have 1 header and footer in your entire app in main.component.html

OR

you can just use td-layout-nav in main.component.html and in your child routes you can change the inner layout AND headers, footers, etc

AND

in those child routes you can use a layout (like td-layout-manage-list) and either use the logo and toolbarTitle attr OR use template override div td-toolbar-content

[kyleledbetter]

I checked your stackblitz but I'm honestly a bit confused why you'd want to separate the header into a separate component. If you use it in main.component.html it would be reused across all child routes anyways...

[ammar91]

I agree, but just wanted to organize app wide layout stuff little better and split those into a sections by moving them into a separate component instead of having everything in a single file. Is that doable?

[haseeb200]

@kyleledbetter This is the current behavior I am having right now after moving header, footer, sidenav and main content to their respective components

https://i.stack.imgur.com/WfXOO.png

[haseeb200]

@kyleledbetter any thoughts?

[emoralesb05]

Not valid anymore since we are repurposing the repo.