armanozak

import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { Component, forwardRef, Input } from '@angular/core';

@Component({
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => SampleComponent),
    multi: true,
  }],
  

armanozak

import { ControlValueAccessor } from '@angular/forms';
import { Component } from '@angular/core';

@Component({ template: '' })
export class AbstractNgModelComponent<T = any> implements ControlValueAccessor {
  
  /*
  This is where boilerplate code for ControlValueAccessor
  and any other reusable property or method will be placed
  */

armanozak

import { ControlValueAccessor } from '@angular/forms';
import { ChangeDetectorRef, Component, Injector, Input, Type } from '@angular/core';
import { uuid } from '../utils/generators';

@Component({ template: '' })
export class AbstractNgModelComponent<T = any> implements ControlValueAccessor {
  @Input()
  cid: string = uuid();

  @Input()

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;

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

@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: `
    <context-consumer consume="progress"></context-consumer>

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

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: 'my-app',
  template: `
    <context-provider
      provide="progress progressStriped progressType"
      [contextMap]="{progressType: 'type'}"
    >
      <one-way></one-way>
    </context-provider>
  `,

armanozak

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

    {{ rate }}
  `,
})