Closed haseeb200 closed 5 years ago
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
@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
@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
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
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...
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?
@kyleledbetter This is the current behavior I am having right now after moving header, footer, sidenav and main content to their respective components
@kyleledbetter any thoughts?
Not valid anymore since we are repurposing the repo.
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
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.