Skip to content

Instantly share code, notes, and snippets.

:octocat:
Coding smart ;)

Oleksa Novyk navix

:octocat:
Coding smart ;)
Block or report user

Report or block navix

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
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 Mar 16, 2019
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 Jan 25, 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.