Category: JavaScript

Sometimes, we want to detect changes in an array from an @input property with Angular.

In this article, we’ll look at how to detect changes in an array from an @input property with Angular.

How to detect changes in an array from an @input property with Angular?

To detect changes in an array from an @input property with Angular, we can get the latest value in the ngDoCheck method.

For instance, we write

//...
export class AppComponent implements OnInit {
  constructor(private iterableDiffers: IterableDiffers) {
    this.iterableDiffer = iterableDiffers.find([]).create(null);
  }

  ngDoCheck() {
    const changes = this.iterableDiffer.diff(this.inputArray);
    if (changes) {
      console.log("Changes detected!");
    }
  }
  //...
}

to inject the IterableDiffers dependency into our component.

Then we write this.iterableDiffer.diff(this.inputArray) to check if there’re any changes.

If changes is defined, then there’re changes.

Conclusion

To detect changes in an array from an @input property with Angular, we can get the latest value in the ngDoCheck method.

Sometimes, we want to dynamically load external JavaScript file from Angular component.

In this article, we’ll look at how to dynamically load external JavaScript file from Angular component.

How to dynamically load external JavaScript file from Angular component?

To dynamically load external JavaScript file from Angular component, we can create script tags dynamically and attach it to the body.

For instance, we write

//...
export class AppComponent implements OnInit {
  ngOnInit() {
    this.loadScript("http://www.some-library.com/library.js");
    this.loadScript("../assets/js/my-library.js");
  }

  public loadScript(url: string) {
    const body = <HTMLDivElement>document.body;
    const script = document.createElement("script");
    script.innerHTML = "";
    script.src = url;
    script.async = false;
    script.defer = true;
    body.appendChild(script);
  }
}

to add the loadScript method that creates the script element with document.createElement.

Then we set a few attributes of the script element with

script.innerHTML = "";
script.src = url;
script.async = false;
script.defer = true;

Then we call body.appendChild with script to attach the script element into the body element.

Conclusion

To dynamically load external JavaScript file from Angular component, we can create script tags dynamically and attach it to the body.

Sometimes, we want to set dropdown options default value with Angular.

In this article, we’ll look at how to set dropdown options default value with Angular.

How to set dropdown options default value with Angular?

To set dropdown options default value with Angular, we can add the selected attribute to the default option in the select.

For instance, we write

<select name="types" id="types" [(ngModel)]="model.type" #type="ngModel">
  <option class="" disabled selected value="undefined">Select an Option</option>
  <option *ngFor="let item of courseTypes; let x = index" [ngValue]="type.id">
    {{ item.name }}
  </option>
</select>

to make the first option the default one by adding the selected attribute to the option.

Conclusion

To set dropdown options default value with Angular, we can add the selected attribute to the default option in the select.

Sometimes, we want to add Bootstrap to an angular-cli project.

In this article we’ll look at how to add Bootstrap to an angular-cli project.

How to add Bootstrap to an angular-cli project?

To add Bootstrap to an angular-cli project, we can install the bootstrap package and then add the Bootstrap script and CSS paths into angular.json.

We run

npm install bootstrap

to install bootstrap.

Then we write

//...
{
  "scripts": ["./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"],
  //...
  "styles": [
    "styles.css",
    "./node_modules/bootstrap/dist/css/bootstrap.min.css"
  ]
}
//...

to add the Bootstrap scripts and styles paths into angular.json.

Then we restart ng serve so the changes in angular.json will be picked up.

Conclusion

To add Bootstrap to an angular-cli project, we can install the bootstrap package and then add the Bootstrap script and CSS paths into angular.json.

Sometimes, we want to return data directly from an Observable with Angular.

In this article, we’ll look at how to return data directly from an Observable with Angular.

How to return data directly from an Observable with Angular?

To return data directly from an Observable with Angular, we can return an observable that lets us get the data.

For instance, we write

//...
export class Component implements OnInit, AfterViewInit {
  //...
  getSomething() {
    return this._restService
      .addRequest("object", "method")
      .run()
      .subscribe(
        (res) => {
          // ...
        },
        (err) => {
          console.error(err);
        }
      );
  }
  //...
}

to add the getSomething that returns the observable returned by subscribe.

We get the response data from the subscribe callback and do what we want with it.

Conclusion

To return data directly from an Observable with Angular, we can return an observable that lets us get the data.