Menu
I am setting up a new project with latest Angular.I am using Angular Material for this.I am using BreakpointObserver from @angular/cdk/layout. I am able to add that succesfully to one of my component.But I want to add it globally to my project so that all the components/modules can use web/tablet/mobile breakpoints for different DOM manipulation.
I am able to add that to the app.component.ts , but I am expecting to write a directive or something.Not service because BreakpointObserver is already a service.
What would be the best approach to add BreakPointObserver observables globally in the project.Do not want to add isHandset$ observables everytime in each component's ts file
822
We'll learn to use BreakpointObserver from the Angular CDK Layout Module to observe the screen-size changes insetad of using CSS media queries. CDK stands for Component Development Kit. In the first step, we need to generate a project using Angular CLI 9. Open a new terminal and run the following command: You'll be prompted for a couple of options.
Before you can use BreakpointObserver, you need to install the Angular’s CDK Layout Module using the following commands: Next, open the src/app/app.module.ts file and add LayoutModule in the imports array:
The solution to this problem is pretty simple, thanks to the Angular CDK. The first step is to install the CDK to your project: Next, import the LayoutModule from @angular/cdk/layout to your module. For example, like this in the app.module.ts file:
The last thing to know about the BreakpointObserver is that the CDK provides some built in breakpoints that you can use if you want. They are based on Google's Material Design specification, and the values are: You can use them by importing Breakpoints from the CDK's layout folder:
I think your idea of using some kind of custom directive would be a good solution. For example, in the case you want to add/remove components of the DOM, you could define only one structural directive that handle adding/removing its host, depending on the viewport dimension using the BreakpointObserver service.
To accomplish that you could define something like this:
@Directive({
selector: '[contentForSmallScreen]'
})
export class ContentForSmallScreenDirective implements OnDestroy {
constructor(
private templateReference: TemplateRef<any>,
private viewContainerRef: ViewContainerRef,
private breakpointObserver: BreakpointObserver
) {
this.breakpointObserver
.observe([tablet,mobile])
.pipe(pluck('matches'), distinctUntilChanged())
.subscribe(this.showHideHost);
}
private showHideHost = (matches: boolean) => {
matches
? this.viewContainerRef.createEmbeddedView(this.templateReference)
: this.viewContainerRef.clear();
}
ngOnDestroy(): void {
this.breakpointObserver.ngOnDestroy();
}
}
And then after declare it at your NgModule, it can be used with any component/html element you wanna add/remove from the DOM depending on if the viewport's dimension meet the tablet and mobile viewport specs.
<app-any-component *contentForSmallScreen></app-any-component>
👨💻 StackBlitz example
74
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
