All Categories

  • Detect Breakpoint at Angular

    2/1/2019 -
    Detect breakpoint by use @angular/cdk breakpoint usually is CSS, you write media query for different style for different view. However, sometime you might want to do that in Javascript instead of CSS. At this blog, we'll use @angular/cdk at Angular Universal App project. First intall @angular/cdk "@angular/cdk": "^7.3.3", Add Layout Module to root angular module import { LayoutModule } from "@angular/cdk/layout"; @NgModule({ declarations: [AppComponent, HomeComponent], imports: [ BrowserModule.withServerTransition({ appId: "my-app" }), RouterModule.forRoot([ { path: "", component: HomeComponent, pathMatch: "full" }, { path: "lazy", loadChildren: "./lazy/lazy.module#LazyModule" }, { path: "lazy/nested", loadChildren: "./lazy/lazy.
  • Scroll Event at Angular Universal

    2/1/2019 -
    Clone Universal starter project First, we'll need to create angular universal app, you can clone from this universal-starter. Wrong way to add window.addEventListener("scroll") Following will be able to run at angular app, but will get error on angular universal server-side rendering. ngOnInit() { window.addEventListener("scroll", this.scrollEvent, true); } ngOnDestroy() { window.removeEventListener("scroll", this.scrollEvent, true); } scrollEvent = (event: any): void => { const number = event.srcElement.scrollTop;; }; use HostListener from angular/core Following code will able to run on both Angular app and Angular Universal server side rendering.