Skip to content

Instantly share code, notes, and snippets.

:octocat:
Coding smart ;)

Oleksa Novyk navix

View GitHub Profile
@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

@navix
navix / readme.md
Created Jan 25, 2019
Detect router navigation events called by browser in Angular 7
View readme.md

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') {
      ...
You can’t perform that action at this time.