Adding new components with default layout - core-ui

Question

I have just downloaded the angular admin template. Then i add a new component:
ng g n test
When I navigate to the component, the default layout is not applied. I guess it uses the app.component layout. How do you tell the component it should use the default UI?

Answer 1

to add a new componet follow these steps:
create a component-name-routing.module.ts file
create a component-name.module.ts file
create a component-name.component.html file
create a component-name.component.ts file
component-name.component.ts file:
import { Component, OnInit, Input } from "#angular/core";
#Component({
selector: 'app-componentName',
templateUrl: './component-name.component.html',
})
export class NameComponent implements OnInit {}
component-name-routing.module.ts file
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { NameComponent } from "./component-name.component";
const routes: Routes = [
{
path: '',
component: NameComponent,
data: {
title: 'route title'
},
children: [
{
path: '',
redirectTo: ''
},
]
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ComponentNameRoutingModule {}
component-name.module.ts file
// Angular
import { CommonModule } from '#angular/common';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
// Theme Routing
import { ComponentNameRoutingModule } from "./component-name-routing.module";
import { ComponentNameComponent } from "./component-name.component";
#NgModule({
imports: [
ComponentNameRoutingModule,
],
declarations: [
ComponentNameComponent
]
})
export class ComponentNameModule {
constructor() {}
}
all this in a new folder in the views directory and you'll be good to go.