eliraneliassy

import { ChangeDetectionStrategy } from '@angular/core';
import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'app-container',
  templateUrl: `
    <button (click)="add(4)" class="btn btn-primary">Add Number</button>
    <app-child [data]="numbers$"></app-child>
  `,

eliraneliassy

@Component({
  selector: 'app-counter',
  template: `
  <p> {{res$ | async}}</p>
  ...
  `,
  styleUrls: ['./counter.component.scss'],
})
export class CounterComponent {

eliraneliassy

@Component({
  selector: 'app-counter',
  template: `
    ...
  `,
  styleUrls: ['./counter.component.scss'],
  providers: [SomeProvider],
  deps: [SomeDirective, SomePipe, SomeModule]

})

eliraneliassy

ngOnInit() {
    const injector = ɵɵdirectiveInject(INJECTOR);
    ɵrenderComponent(CounterComponent, { host: 'counter-host', injector });
}

eliraneliassy

constructor(private injector: Injector) { }

ngOnInit() {
  ɵrenderComponent(CounterComponent, { host: 'counter-host', injector: this.injector });
}

eliraneliassy

@Component({
  selector: 'app-counter',
  template: `
    <p>Counter value: {{counter}}</p>
    <button (click)="plus()" class="btn btn-primary">+</button>
    <button (click)="reset()" class="btn btn-danger">Reset</button>
    <button (click)="save()" class="btn btn-success">Save</button>
  `,
  styleUrls: ['./counter.component.scss'],

eliraneliassy

export class StorageService {

  constructor(private httpClient: HttpClient) { }

  saveCounter(counter: number) {
    return this.httpClient.post('SOME_FAKE_URL', { counter });
  }
}

eliraneliassy

@Component({
  selector: 'app-counter',
  template: `
    <p>Counter value: {{counter}}</p>
    <button (click)="plus()" class="btn btn-primary">+</button>
    <button (click)="reset()" class="btn btn-danger">Reset</button>
    <button (click)="save()" class="btn btn-success">Save</button>
  `,
  styleUrls: ['./counter.component.scss'],

eliraneliassy

@Component({
  selector: 'app-render-comp',
  template: `<counter-host></counter-host>`,
  styleUrls: ['./render-comp.component.scss'],
})
export class RenderCompComponent implements OnInit {

  ngOnInit() {
    ɵrenderComponent(CounterComponent, { host: 'counter-host' });
  }

eliraneliassy

@Component({
  selector: 'app-render-comp',
  template: `<counter-host></counter-host>`,
  styleUrls: ['./render-comp.component.scss'],
})
export class RenderCompComponent implements OnInit {

  ngOnInit() {
    ɵrenderComponent(CounterComponent, { host: 'counter-host' });
  }