armanozak

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="form">
      <context-provider provide="rate">
        <two-way></two-way>
      </context-provider>
    </form>

    {{ rate }}

armanozak

@Component({
  selector: 'two-way',
  template: `
    <ng-template
      contextDisposer="rate onRating"
      let-rate="rate"
      let-onRating="onRating"
    >
      <rating
        [ngModel]="rate"

armanozak

@Component({
  selector: 'my-app',
  template: `
    <context-provider provide="rate onRating">
      <two-way></two-way>
    </context-provider>

    {{ rate }}
  `,
})

armanozak

@Component({
  selector: 'my-app',
  template: `
    <context-provider provide="rate pre onRating">
      <two-way></two-way>
    </context-provider>

    {{ rate }}
  `,
})

armanozak

@Component({
  selector: 'my-app',
  template: `
    <context-provider
      provide="progress progressStriped progressType"
      [contextMap]="{progressType: 'type'}"
    >
      <one-way></one-way>
    </context-provider>
  `,

armanozak

@Component({
  selector: 'one-way',
  template: `
    <ng-template contextDisposer let-context>
      <progressbar
        [type]="context.type"
        [value]="context.progress"
        [striped]="context.progressStriped"
      >{{ progress ? progress + '%' : '' }}</progressbar>
    </ng-template>

armanozak

@Component({
  selector: 'one-way',
  template: `
    <context-consumer consume="progress"></context-consumer>

    <progressbar
      contextConsumer
      [contextMap]="{progress: 'value', progressStriped: 'striped'}"
    >{{ progress ? progress + '%' : '' }}</progressbar>
  `,

armanozak

@Component({
  selector: 'my-app',
  template: `
    <context-provider
      provide="progress progressStriped progressType"
      [contextMap]="{progressType: 'type'}"
    >
      <one-way></one-way>
    </context-provider>
  `,

armanozak

import { ChangeDetectionStrategy, Component, forwardRef, Input } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { AbstractInputComponent } from '../abstracts/input.component';


@Component({
  selector: 'app-input-text',
  template: `
  <input [id]="cid"
         [type]="type"

armanozak

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { AbstractNgModelComponent } from './ng-model.component';

@Component({ template: '' })
export class AbstractInputComponent extends AbstractNgModelComponent<string> {
  @Input()
  readonly: boolean = false;

  @Input()
  required: boolean = false;