Category: Angular

Sometimes, we want to trigger change detection manually in Angular.

In this article, we’ll look at how to trigger change detection manually in Angular.

How to trigger change detection manually in Angular?

To trigger change detection manually in Angular, we can use ChangeDetectorRef .

For instance, we write

import { ChangeDetectorRef } from '@angular/core';

to import it.

Then in our component, we write

constructor(private ref: ChangeDetectorRef) { 
}

to inject the ref ChangeDetectorRef object into our component.

Then in our component method, we write

this.ref.markForCheck();

to manually trigger change detection.

Conclusion

To trigger change detection manually in Angular, we can use ChangeDetectorRef .

Sometimes, we want to select an element in a component template with Angular.

In this article, we’ll look at how to select an element in a component template with Angular.

How to select an element in a component template with Angular?

To select an element in a component template with Angular, we can assign an ref to the element in the template.

Then we can use ViewChild to access it.

For instance, we write

import { Component, ElementRef, ViewChild } from "@angular/core";

@Component({
  selector: "my-app",
  template: ` <input #inputEl value="hello" /> `,
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  @ViewChild("inputEl") inputEl: ElementRef;

  ngAfterViewInit() {
    console.log(this.inputEl);
  }
}

to assign the inputEl ref to the input element.

Then we access the element with

@ViewChild("inputEl") inputEl: ElementRef

in the template.

We call ViewChild with the ref name.

Then we use this.inputEl to get the element in our component method.

Conclusion

To select an element in a component template with Angular, we can assign an ref to the element in the template.

Sometimes, we want to fix *ngIf and *ngFor on same element causing error with Angular.

In this article, we’ll look at how to fix *ngIf and *ngFor on same element causing error with Angular.

How to fix *ngIf and *ngFor on same element causing error with Angular?

To fix *ngIf and *ngFor on same element causing error with Angular, we can move *ngIf to the ng-container component.

For instance, we write

<ng-container *ngIf="show">
  <div *ngFor="let thing of stuff">
    {{ log(thing) }}
    <span>{{ thing.name }}</span>
  </div>
</ng-container>

to use *ngIf in the ng-container component to show the div only when show is true.

And then we use *ngFor in the div to render the items in the stuff array.

Conclusion

To fix *ngIf and *ngFor on same element causing error with Angular, we can move *ngIf to the ng-container component.

Sometimes, we want to use an EventEmitter with Angular.

In this article, we’ll look at how to use an EventEmitter with Angular.

How to use an EventEmitter with Angular?

To use an EventEmitter with Angular, we can use it to emit an event from the child component to the parent.

For instance, we write

@Component({
  selector: "child",
  template: ` <button (click)="sendNotification()">Notify my parent!</button> `,
})
class Child {
  @Output() notifyParent: EventEmitter<any> = new EventEmitter();

  sendNotification() {
    this.notifyParent.emit("hello parent");
  }
}

to create the notifyParent EventEmitter object.

Then we call notifyParent.emit in the sendNotification method that’s called when we click the button.

Then in the parent component, we write

@Component({
  selector: "parent",
  template: ` <child (notifyParent)="getNotification($event)"></child> `,
})
class Parent {
  getNotification(evt) {
    // Do something with the notification (evt) sent by the child!
  }
}

to listen for the notifyParent event emitted by the child component.

And we get the argument we call emit with in getNotification.

Conclusion

To use an EventEmitter with Angular, we can use it to emit an event from the child component to the parent.

Sometimes, we want to apply filters to Angular *ngFor.

In this article, we’ll look at how to apply filters to Angular *ngFor.

How to apply filters to Angular *ngFor?

To apply filters to Angular *ngFor, we can apply a filter with the |.

For instance, we write

this.filterArgs = { title: "bar" };
this.items = [{ title: "foo" }, { title: "bar" }, { title: "baz" }];

in our component code.

Then in the template, we write

<li *ngFor="let item of items | myFilter: filterArgs ">
  ...
</li>

to apply the myFilter filter.

Then we create the myFilter filter by writing

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "myFilter",
  pure: false,
})
export class MyFilterPipe implements PipeTransform {
  transform(items: any[], filter: Object): any {
    if (!items || !filter) {
      return items;
    }
    return items.filter((item) => item.title.includes(filter.title) );
  }
}

to create the MyFilterPipe class that we name as myFilter.

Then we add the transform method in the class.

We return the filtered results that we get after calling filter.

Now the myFilter filter will render the filtered results in the template.

Conclusion

To apply filters to Angular *ngFor, we can apply a filter with the |.