public onSelectedUser(userId: number) {
this.selectedUser = userId;
this._filtered(this.selectedUser, this.selectedYear);
}
public onSelectedYear(year: number): void {
this.selectedYear = year;
this._filtered(this.selectedUser, this.selectedYear);
}
private _filtered(userId: number, year: number): void {
let filteredNotes = this.notes;
if (userId) {
filteredNotes = filteredNotes.filter(note => note.user_id === userId);
}
if (year) {
filteredNotes = filteredNotes.filter(note => note.year === year);
}
this.filteredNotes = filteredNotes;
}
@Directive({ selector: '[hasAuth]' })
export class HasAuthDirective implements OnInit {
constructor(private _viewContainer: ViewContainerRef, private _template: TemplateRef<any>) { }
ngOnInit(): void {
this._checkAuth(/*ваше определение аутентификации типа boolean*/);
}
private _checkAuth(isAuth: boolean): void {
if (isAuth) {
this._viewContainer.createEmbeddedView(this._template);
} else {
this._viewContainer.clear();
}
}
}
<button *hasAuth>Редактировать статью</button>
@Directive({ selector: '[hasRole]' })
export class HasRoleDirective implements OnInit {
@Input() hasRole: string[] | string | undefined;
constructor(private _viewContainer: ViewContainerRef,
private _template: TemplateRef<any>) {
}
ngOnInit(): void {
this._checkRoles(GlobalService.userRole);
}
private _checkRoles(userRole: string): void {
if (!this.hasRole || this.hasRole === 'undefined' || this.hasRole.indexOf(userRole) !== -1) {
this._viewContainer.createEmbeddedView(this._template);
} else {
this._viewContainer.clear();
}
}
}
<!-- User Wrapper -->
<header></header>
<app-user-menu></app-user-menu>
<main>
<router-outlet></router-outlet>
</main>
<footer><footer>
<!-- Admin Wrapper -->
<app-admin-header></app-admin-header>
<app-admin-menu></app-admin-menu>
<main>
<router-outlet></router-outlet>
</main>
<footer><footer>
// routing
export const routes: Routes = [
{ path: 'account', component: UserWrapperComponent, children: [ ... ] }.
{ path: 'admin', component: AdminWrapperComponent, children: [ ... ] }
];
public getElementData(): Observable<any[]> {
return this._httpClient.get('api/test'); // any[]
}
public displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
public dataSource;
// constructor ...
ngOnInit(): void {
this._getElementData();
}
private _getElementData(): void {
this._homeService.getElementData().subscribe(res => {
this.dataSource = new MatTableDataSource(res);
});
}
public displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
public dataSource = new MatTableDataSource();
// constructor ...
ngOnInit(): void {
this._getElementData();
}
private _getElementData(): void {
this._homeService.getElementData().subscribe(res => {
this.dataSource.data = res;
});
}
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu" [overlapTrigger]="false">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>