- It is incredible to fix that problem.
- Here, we simply require to use a template.
import { Input } from '@angular/core';
import { Component, TemplateRef } from '@angular/core';
@Component({
selector: 'app-page-list',
templateUrl: '
',
})
class PageList{
@Input() temRef:TemplateRef;
}
Parent component
hey!
In the above example, we created a template using ng-template and injected it as a parameter within the child component.
And next is that the child component is using it in a container, with the help of the ngTemplateOutlet directive.
Let’s understand the concept of ViewChild VS ContentChild
import { ContentChild, Input } from '@angular/core';
import { Component, TemplateRef } from '@angular/core';
@Component({
selector: 'app-page-list',
templateUrl: '',
})
class PageList{
@ContentChild('pageList',{static:true})
temRef:TemplateRef;
}
hey!
Here, we define the ContentChild decorator. The ViewChild decorator will find a child within the component. And that defined by its template while ContentChild finds a child in the content defined by the component.
Now we will see the whole example of the Angular reusable components.
This example contains the following:
- Carded page
- Displaying the list of page of employees
- Title
- Actions
- Their content
- And name
- Pagination
- Filtering and sorting.
ng-template defines that you simply can render the content manually for full control over how the control displays.
mat-paginator is for navigating the paged information. And for that, we install the material in our angular project.
onEvent is that the event for paginating the list on the table.
The Button is for the add new employee with a material icon.
Now, this is the employepage.ts file.
import { Component, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { emp } from "../emp";
@Component({
selector: 'app-employepage',
templateUrl: './employepage.component.html',
styleUrls: ['./employepage.component.css']
})
export class EmployepageComponent implements OnInit {
dataSource:emp[];
protected list:FormGroup;
constructor() { }
ngOnInit(): void {
}
}
Datasource adds the data of employees.
And within the list, we will access the data in the formgroup.
Formgroup is that the module of the angular/forms.
Emp is a class that name as emp.ts. Here it is:
export class emp{
title:string;
search:string;
actions:string;
content:string;
}
Now, the child component name as an employepage component of a parent component.
Ng-container defines the section of a page, without having created an additional element just for that.
ngTemplateOutlet defines the reference of the template and context object of the template.
Here is that the employe.component.ts file.
import { Component, ContentChild, OnInit, TemplateRef } from '@angular/core';
@Component({
selector: 'app-employe',
templateUrl: './employe.component.html',
styleUrls: ['./employe.component.css'],
})
export class EmployeComponent implements OnInit {
@ContentChild('title',{static:true}) titTemplate:TemplateRef;
@ContentChild('actions',{static:true}) actTemplate:TemplateRef;
@ContentChild('search',{static:true}) serTemplate:TemplateRef;
@ContentChild('content',{static:true}) conTemplate:TemplateRef;
constructor() { }
ngOnInit(): void {
}
}
In this way, we created the angular components with the use of child and parent components.