CODEWITHSUNDEEP
angular
Ahmed Sakr
Ahmed Sakr

Reputation: 129

How to add default layouts in angular6?

hello Everyone I want to add default layout to be the main layout of all my angular components ,

eg. Layout for main pages and layout for login pages. If it is available to make that? If not , what is the best way to handle this matter?

Upvotes: 2

Views: 1169

Answers (2)

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92427

You can do it by define <layout> component (which will use <ng-content>) which will be used by all components in this way

Some component template:

<layout>
    <div> Some component content... </div>
</layout>

The layout component template can look like that as very simple example (you need to add it to app.module.ts as any other component):

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'layout',
    providers: [],
    styleUrls: [ './layout.component.css' ],
    templateUrl: './layout.component.html'
})

export class LayoutComponent implements OnInit
{    
    
    constructor()
    {}

    public ngOnInit()
    {        
        
    }
}
.layout {}
.layout-head {}
.layout-body{}
.layout-footer{}
<div class="layout">
    <div class="layout-head"></div>
    <div class="layout-body">
        <ng-content></ng-content>
    </div>
    <div class="layout-footer"></div>
</div>

Upvotes: 1

Jelle
Jelle

Reputation: 2186

This can be achieved in atleast 2 ways:

Good luck!

Upvotes: 3

Related Questions