Skip to content

Instantly share code, notes, and snippets.

:octocat:
Coding smart ;)

Oleksa Novyk navix

:octocat:
Coding smart ;)
View GitHub Profile
@navix
navix / README.md
Last active May 13, 2019
Bind ngModel controls to ngForm from parent component
View README.md

Bind ngModel controls to ngForm from parent component

This allows you to split a template-driven form on components.

Create formProvider directive to proxy ngModel injector from parent to child:

import { Directive, SkipSelf, forwardRef } from '@angular/core';
import { ControlContainer, Form } from '@angular/forms';
@navix
navix / readme.md
Last active Apr 15, 2020
Typescript advanced built-in types
View readme.md
@navix
navix / readme.md
Created Feb 11, 2019
Add nodes just after a component (not inside) in Angular 7
View readme.md

Add nodes just after a component (not inside) in Angular 7

For example we have radio-input and want to create a custom view. But no elements allowed inside input element.

<label>
  <input type="radio" uiRadio ...>
  Option A
</label>
@navix
navix / readme.md
Created Feb 11, 2019
Import JSON into Angular 7 during build
View readme.md

Import JSON into Angular 7 during build

typings.d.ts

declare module '*.json' {
  const value: any;
  export default value;
}
@navix
navix / readme.md
Created Feb 11, 2019
Wait for all animations to finish before :leave in Angular 7 (@angular/animations)
View readme.md

Wait for all animations to finish before :leave in Angular 7

Including child components.

@Component({
  ...
  animations: [
    trigger('host', [
      transition(':enter, :leave', [
@navix
navix / readme.md
Created Feb 11, 2019
Proxy in Angular CLI 7
View readme.md

Proxy in Angular CLI 7

For example proxy GraphQL requests from the default Angular CLI port to your API server.

localhost:4200/graphql -> localhost:3000/graphql

proxy.conf.json

View angular-in-view-directives.html
<!-- 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
navix / readme.md
Created Feb 11, 2019
Typescript Paths
View readme.md

Typescript Paths

Setup an alternative path to directories.

tsconfig.json

{
  "compilerOptions": {
    ...
@navix
navix / readme.md
Created Feb 11, 2019
Docker image with Angular application
View readme.md

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
navix / readme.md
Last active Dec 18, 2019
Prevent leaving from any page using Router in Angular 7
View readme.md

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 https://github.com/angular/angular/issues/11836 will be done.

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

leave-guard.service.ts

You can’t perform that action at this time.