navix

<!-- wInViewRoot directive is needed to specify the `root` for `IntersectionObserver` and some other it's options e.g. `margin` -->
<div class="container" wInViewRoot="viewport">
  Any content can be here
  <w-in-view-item>
    <!-- Content will be replaced by a placeholder <div> with the same height as original content.
         Also `InViewItemComponent`s change detector will be detached when it become invisible which means
         all the content's change detectors won't be reachable and will be inactive as well. -->   
  </w-in-view-item>
  ...or any other content can be here
  <w-in-view-item>

navix

Typescript Paths

Setup an alternative path to directories.

tsconfig.json

{
  "compilerOptions": {
 ...

navix

Docker image with Angular application

How to build a Docker image that serves Angular application (without Universal).

Build your application to the dist/app directory, then copy it into an image.

Dockerfile

FROM nginx:latest

navix

Prevent leaving from any page using Router in Angular 7

Angular has CanDeactivate guard, but you have to declare it to each path in the routes configuration.

Valid until angular/angular#11836 will be done.

You can use CanActivateChild guard to prevent leaving from any component with single declaration.

leave-guard.service.ts

navix

Detect router navigation events called by browser in Angular 7

...
constructor(
  private router: Router,
) {
  this.router.events.subscribe(event => {
    if (event instanceof NavigationStart && event.navigationTrigger === 'popstate') {
 ...

navix

Import module using forRoot in Angular 7

Sometimes we want import a module and pass some configuration that will be processed before module services providing.

meta.ts

import { InjectionToken } from '@angular/core';

export interface FeatureConfig {

navix

Dynamic imports in Angular 7

Some big pieces of code you can load dynamically.

Update your tsconfig.json:

{
  ...
 "compilerOptions": {

navix

Add ControlValueAccessor to component in Angular 7

ControlValueAccessor allows your component interacts with ngModel.

Let's create a custom quantity input.

Add NG_VALUE_ACCESSOR provider that points to component itself and implement ControlValueAccessor interface:

import { Component, forwardRef } from '@angular/core';

navix

Custom EventManagerPlugin for Angular 7

In Angular we can extend the events binding syntax. Let's add posibility to log an event before firing a handler.

Create custom event plugin:

import { Injectable } from '@angular/core';
import { EventManager, ɵgetDOM as getDOM } from '@angular/platform-browser';

navix

Component with popup using Angular CDK Overlay

Template:

<ng-template #templateRef>
  Popup content
</ng-template>