Unpopular features of Angular
Principal Application Devloper
pankajparkar
Auxiliary Routes 🚀
export const routes: Routes = [
{ path: 'dashboard', component: DashboardComponent },
{
path: 'login',
component: LoginComponent,
outlet: 'modal'
},
{
path: 'details',
component: DetailsComponent,
outlet: 'modal'
},
{ path: '**', redirectTo: 'dashboard' },
];
<div class="main-container">
<uf-navbar></uf-navbar>
<router-outlet></router-outlet>
<router-outlet name="modal"></router-outlet>
</div>
[routerLink]="[{
outlets: { modal: ['login']}
}]"
Auxiliary Routes 🚀
@Component({
selector: 'uf-login',
...
})
export class LoginComponent {
router = inject(Router);
ref = inject(MatDialog)
.open(LoginDialog)
.afterClosed()
.subscribe(() => {
this.router.navigate([{
outlets: { modal: null }
}])
});
}
@Component({
standalone: true,
imports: [
...
],
template: `
...
`
})
export class LoginDialog {
...
}
@Component({
selector: 'uf-child-to-parent-access',
...,
providers: [CardsService],
template: `
<mat-card class="example-card">
<mat-card-header>
<mat-card-title>{{card.title}}</mat-card-title>
</mat-card-header>
<mat-card-actions>
<child-component></child-component>
</mat-card-actions>
</mat-card>
`,
})
export class ParentComponent {
public card = inject(CardsService).getCardDetails();
}
@Component({
selector: 'child-component',
imports: [
...
],
template: `
somewhere in the footer
`,
})
export class ChildComponent {
// Needs to read parent cmp info
}
export class ChildComponent {
@Host() @Optional()
protected parent = inject(ParentComponent);
ngOnInit() {
console.log(this.parent);
}
}
DI + @Host()
export class ChildComponent {
protected parent = inject(ParentComponent);
ngOnInit() {
console.log(this.parent);
}
}
DI Injection
Directive 🚀
<mat-paginator
(page)="handlePageEvent($event)"
[length]="length"
[pageIndex]="pageIndex"
[pageSize]="pageSize"
[showFirstLastButtons]="true"
[pageSizeOptions]="[5,10,25]"
aria-label="Select page">
</mat-paginator>
Directive 🚀
@Directive({
selector: 'mat-paginator',
standalone: true,
})
export class FancyPaginatorDirective {
paginator = inject(MatPaginator);
el = inject(ElementRef);
@HostBinding('attr.aria-label')
ariaLabel = 'Select page';
ngOnInit() {
this.paginator.showFirstLastButtons = true;
this.paginator.pageSizeOptions = [5, 10, 25];
}
}
@Component({
selector: 'uf-extend-third-party',
standalone: true,
imports: [
MatPaginatorModule,
FancyPaginatorDirective,
],
})
export class ExtendThirdParty {
}
Utilize the power of exportAs in directive/component
<div class="button-row">
<button #button mat-button (click)="testClick(button)">
Basic
</button>
</div>
Utilize the power of exportAs in directive/component
@Directive({
selector: '[ufUseRef]',
standalone: true
})
export class UseRefDirective {
dom = inject(ElementRef).nativeElement;
}
<button
mat-button
ufUseRef
#button="ufUseRef"
(click)="testClick(button)">
Basic
</button>
@Injectable()
export class LogService {
interval: any;
count = 0;
constructor() {
console.log('constructor: logging starting...');
this.interval = setInterval(() => {
console.log(this.count++);
}, 1000);
}
ngOnDestroy() {
console.log('ngOnDestroy: cleaning up...');
clearInterval(this.interval);
}
}
@pankajparkar
www.pankajparkar.com
@pankajparkar
@pankajparkar
@pankajparkar
@pankajparkar