@angular/core#ChangeDetectionStrategy TypeScript Examples

The following examples show how to use @angular/core#ChangeDetectionStrategy. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: accordion-panel-heading.component.ts    From canopy with Apache License 2.0 7 votes vote down vote up 
@Component({
  selector: 'lg-accordion-panel-heading',
  templateUrl: './accordion-panel-heading.component.html',
  styleUrls: [ './accordion-panel-heading.component.scss' ],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LgAccordionPanelHeadingComponent implements AfterViewChecked {
  @Input() headingLevel: HeadingLevel;
  @Input()
  get isActive() {
    return this._isActive;
  }
  set isActive(isActive: boolean) {
    this._isActive = isActive;
    this.cdr.markForCheck();
  }
  @Output() toggleActive = new EventEmitter<boolean>();

  _id = nextUniqueId++;
  _toggleId = `lg-accordion-panel-heading-${this._id}`;
  _panelId = `lg-accordion-panel-${this._id}`;
  _isActive = false;

  constructor(private cdr: ChangeDetectorRef) {}

  ngAfterViewChecked() {
    this.cdr.detectChanges();
  }

  toggle() {
    this.isActive = !this.isActive;
    this.toggleActive.emit(this.isActive);
  }
}
Example #2
Source File: no-content.component.ts    From 1hop with MIT License 6 votes vote down vote up 
@Component({
  selector: 'app-no-content',
  templateUrl: 'no-content.component.html',
  styleUrls: ['no-content.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class NoContentComponent implements OnInit {
  constructor() {
  }

  ngOnInit() {
  }
}
Example #3
Source File: insufficient-funds-ccr-error.component.ts    From rubic-app with GNU General Public License v3.0 6 votes vote down vote up 
@Component({
  selector: 'app-insufficient-funds-ccr-error',
  templateUrl: './insufficient-funds-ccr-error.component.html',
  styleUrls: ['./insufficient-funds-ccr-error.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class InsufficientFundsCcrErrorComponent {
  public readonly nativeToken: string;

  constructor(
    @Inject(POLYMORPHEUS_CONTEXT)
    private readonly context: TuiDialogContext<void, { nativeToken: string }>
  ) {
    this.nativeToken = context.data.nativeToken;
  }
}
Example #4
Source File: product-detail.component.ts    From Angular-ActionStreams with MIT License 6 votes vote down vote up 
@Component({
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProductDetailComponent implements OnInit {
  // Error messages
  private errorMessageSubject = new Subject<string>();
  errorMessage$ = this.errorMessageSubject.asObservable();

  product$ = this.productService.product$
    .pipe(
      catchError(err => {
        this.errorMessageSubject.next(err);
        return EMPTY;
      }));

  pageTitle$ = this.product$
    .pipe(
      map((p: Product) =>
        p ? `Product Detail for: ${p.productName}` : null)
    );

  constructor(private route: ActivatedRoute,
              private productService: ProductService) { }

  ngOnInit(): void {
    const param = this.route.snapshot.paramMap.get('id');
    if (param) {
      this.productService.changeSelectedProduct(+param);
    }
  }

}
Example #5
Source File: product-detail.component.ts    From Angular-HigherOrderMapping with MIT License 6 votes vote down vote up 
@Component({
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProductDetailComponent implements OnInit {
  errorMessage = '';

  product$ = this.productService.product$
    .pipe(
      catchError(error => {
        this.errorMessage = error;
        return EMPTY;
      }));

  pageTitle$ = this.product$
    .pipe(
      map((p: Product) =>
        p ? `Product Detail for: ${p.productName}` : null)
    );

  constructor(private route: ActivatedRoute,
    private productService: ProductService) { }

  ngOnInit(): void {
    const param = this.route.snapshot.paramMap.get('id');
    if (param) {
      this.productService.changeSelectedProduct(+param);
    }
  }

}
Example #6
Source File: accordion.component.ts    From canopy with Apache License 2.0 6 votes vote down vote up 
@Component({
  selector: 'lg-accordion',
  templateUrl: './accordion.component.html',
  styleUrls: [ './accordion.component.scss' ],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [ { provide: LG_ACCORDION, useExisting: LgAccordionComponent } ],
})
export class LgAccordionComponent implements AfterContentInit {
  @HostBinding('class.lg-accordion') class = true;
  @HostBinding('id') @Input() id = `lg-accordion-${nextUniqueId++}`;
  @Input() headingLevel: HeadingLevel;
  @Input() multi = true;

  @ContentChildren(forwardRef(() => LgAccordionPanelHeadingComponent), {
    descendants: true,
  })
  panelHeadings: QueryList<LgAccordionPanelHeadingComponent>;

  ngAfterContentInit() {
    this.panelHeadings.forEach(panelHeading => {
      panelHeading.headingLevel = this.headingLevel;
    });
  }
}