How to add default layouts in angular6?

Question

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?

Jelle · Answer 1 · 2019-01-21T21:57:37.573

3

This can be achieved in atleast 2 ways:

by implementing routes and having a <router-outlet></router-outlet> inside the template of a component which holds the default layout https://angular.io/guide/router
by using content projection on a component holding the default layout by using <ng-content></ng-content> angular 2 access ng-content within component

Good luck!

edited Jan 21 '19 at 21:57

answered Jan 21 '19 at 21:53

Jelle

2,026
1
12
17

Great, but can you provide a full example please? – Ahmed Sakr Jan 21 '19 at 21:56
I have provided links to the official documentation with examples and to a stack overflow thread which explains with examples both scenarios. This should help you get started. If you have problems implementing show your implementation so we can help you further – Jelle Jan 21 '19 at 21:58

Kamil Kiełczewski · Accepted Answer · 2019-01-21T22:01:40.510

1

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>

edited Jan 21 '19 at 22:01

answered Jan 21 '19 at 21:51

Kamil Kiełczewski

85,173
29
368
345

How can I add this ? – Ahmed Sakr Jan 21 '19 at 21:53
@AhmedSakr I updae answer (create layout component as regular component) – Kamil Kiełczewski Jan 21 '19 at 21:54
Can you provide a full example please? – Ahmed Sakr Jan 21 '19 at 21:57
1

Your answer is good and worked with me ..but in you opinion what is best way to pass styles and scripts from component to layout component.. – Ahmed Sakr Jan 21 '19 at 23:02
@AhmedSakr The layout component use which means that any content (components) which will be between here tag will be automatically included into layout (you don't need to do it by hand). So above snippet there is pice of code (template) with example of usage layout in other component. – Kamil Kiełczewski Jan 21 '19 at 23:05

How to add default layouts in angular6?

2 Answers2