@angular/material/expansion#MatExpansionPanel TypeScript Examples
The following examples show how to use
@angular/material/expansion#MatExpansionPanel.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: layout.component.ts From open-source with MIT License | 6 votes |
private loadIndex(): void {
this.http.get('/static/docs.json').subscribe((routes: DocsIndex) => {
this.initNav(routes);
// open the panel corresponding to the currentUrl
this.panels.changes.subscribe((panels: QueryList<MatExpansionPanel>) => {
panels.map((panel, i) => {
const el = this.elements.get(i);
const attr = el.nativeElement.getAttribute('route');
if (`/${this.currentUrl}`.includes(attr)) {
panel.open();
}
});
});
// wait until the nav is loaded to load the page
this.nav.pipe(
filter(nav => Boolean(nav.length)),
switchMap(() => this.route.url),
).subscribe((segments) => {
// search the requested URL in the index
this.currentUrl = segments.map(({ path }) => path).join('/');
this.metadata = routes[`/${this.currentUrl}`];
if (!this.metadata) {
if (this.response) {
this.response.statusCode = 404;
this.response.statusMessage = 'Page Not Found';
}
this.router.navigateByUrl('/404');
} else if (this.metadata?.redirectTo) {
this.router.navigateByUrl(this.metadata.redirectTo);
}
});
});
}
Example #2
Source File: drawer-nav-item.component.ts From angular-component-library with BSD 3-Clause "New" or "Revised" License | 5 votes |
@ViewChild('matExpansionPanel') matExpansionPanel: MatExpansionPanel;
Example #3
Source File: layout.component.ts From open-source with MIT License | 5 votes |
@ViewChildren(MatExpansionPanel, { read: ElementRef }) elements: QueryList<ElementRef>;
Example #4
Source File: layout.component.ts From open-source with MIT License | 5 votes |
@ViewChildren(MatExpansionPanel) panels: QueryList<MatExpansionPanel>;