I want to pass objects from a parent object to a child object, and I want to use router functionality. Because router-outlet has no support for @input I want to use ngSwitch. But I definitly need the router suport for protecting routes and so on and route activation in my Typescript child object.
I have created a stackblitz: https://stackblitz.com/edit/angular-4j2g7b?file=src%2Fapp%2Fadmin%2Fadmin.component.html
I have predefined a ngSwitch but I want to have the router functionality in the child objects(template) like app-adminsub2.
This is my routing scheme:
const routes: Routes = [
{
path: 'admin',
component: AdminComponent, children: [
{
path: 'adminsub1',
component: AdminSub1Component
},
{
path: 'adminsub2',
component: AdminSub2Component
}
]
},
{
path: 'user',
component: UserComponent,
},
{
path: 'hello',
component: HelloComponent,
}
];
For giving you an overview.
This is the template code in the app-adminsub2 template and the Typescript code of this object.
<p>AdminSub2 works</p>
<h1>Suppliers</h1>
<p>The supplier for us is: {{ currentSupplier.description }} </p>
<p>Products:</p>
<ng-container *ngFor="let product of currentSupplier.products">
<p>{{product}}</p>
</ng-container>
@Input() currentSupplier : Supplier;
constructor() {}
ngOnInit () {
console.log('Current supplier is: ' + this.currentSupplier.description)
}
For other code see my Stackblitz with link above. Is it possible to add router functionality to a child object via ngSwitch or otherwise ?
Oh yes, important to mention, I need @Input and I can't use services.