Angular uygulama içinde birden fazla layout kullanımı

Angular uygulamamız içerisinde login/logout sayfalarında farklı layout, uygulama içinde farklı layout, hatta farklı bölümler için de birden fazla layout kullanmak isteyebiliriz.

Bu durumlar için yapmamız gereken işlem her bir layout'umuz için farklı bir component oluşturmak ve Route dosyamızı aşağıdaki şekilde güncellememiz yeterlidir.

Şimdi diyelim ki 2 adet layout kullanacağız. Layotlarımızdan biri sadece bir layout olsun adına BasicLayoutComponent , diğeri de genel olarak projemizde kullanacağımız bir layout olsun header footer bilgileri içersin. Bu layoutumuzun adına da PortalLayoutComponent diyelim.

Layoutları da kullanan login ve index adında iki component oluşturalım.

Componentleri aşağıdaki komut satırı ile oluşturabiliriz.
 - ng generate component BasicLayout
 - ng generate component PortalLayout
 - ng generate component Index
 - ng generate component Login

Ardından app-routing.module.ts dosyamızı aşağıdaki şekilde düzenliyelim.

app-routing.module.ts

const routes: Routes = [
  {
    path: '', component: PortalLayoutComponent,    children: [
      {path: '', component: IndexComponent},      {path: 'main', component: IndexComponent}]
  },  {
    path: '', component: BasicLayoutComponent,    children: [{path: 'login', component: LoginComponent}]
  }];
@NgModule({
  imports: [RouterModule.forRoot(routes)],  exports: [RouterModule]
})
export class AppRoutingModule {
}

BasicLayout ve PortalLayout html dosyaları içerisine aşağıdaki kodu ekliyoruz.Bu kod içerisine bizim bu layout u kullanan component içeriklerimiz gelecektir. Bu tag in altına ve üstüne bu layout un içereceği htmlleri, componentleri ekleyebiliriz.

basic-layout.component.ts ve portal-layout.component.html dosya içeriklerine eklenecek standart tag.

<router-outlet></router-outlet>

Yukarıdaki işlemi yaptığımızda index i açtığımızda portalLayout içerisindeki html, login i açtığımızda ise BasicLayoutComponent layout u görünecek.