Category: Angular

Categories
Angular Answers

How to iterate object keys using *ngFor in Angular?

Labrador retriever puppy walking on green grass

Sometimes, we want to iterate object keys using *ngFor in Angular.

In this article, we’ll look at how to iterate object keys using *ngFor in Angular.

How to iterate object keys using *ngFor in Angular?

To iterate object keys using *ngFor in Angular, we can use the keyvalue pipe.

For instance, we write

@Component({
  selector: "keyvalue-pipe",
  template: `<span>
    <p>Object</p>
    <div *ngFor="let item of object | keyvalue">
      {{ item.key }}:{{ item.value }}
    </div>
    <p>Map</p>
    <div *ngFor="let item of map | keyvalue">
      {{ item.key }}:{{ item.value }}
    </div>
  </span>`,
})
export class KeyValuePipeComponent {
  object: { [key: number]: string } = { 2: "foo", 1: "bar" };
  map = new Map([
    [2, "foo"],
    [1, "bar"],
  ]);
}

to add use the keyvalue with *ngFor.

We use it to render entries in objects and maps.

And we get the key from the key property and the value from value.

Conclusion

To iterate object keys using *ngFor in Angular, we can use the keyvalue pipe.

Categories
Angular Answers

How to upgrade Angular CLI to the latest version?

Labrador retriever puppy walking on green grass

Sometimes, we want to upgrade Angular CLI to the latest version.

In this article, we’ll look at how to upgrade Angular CLI to the latest version.

How to upgrade Angular CLI to the latest version?

To upgrade Angular CLI to the latest version, we uninstall and install a few packages.

We run

npm uninstall -g @angular/cli
npm install -g @angular/cli@latest

to uninstall the current @angular/cli package and install the latest version of it.

We can also remove everything in node_modules and then install the latest version by running

rm -rf node_modules
npm uninstall --save-dev @angular/cli
npm install --save-dev @angular/cli@latest
npm install

Conclusion

To upgrade Angular CLI to the latest version, we uninstall and install a few packages.

Categories
Angular Answers

How to fix no base href set error with Angular router?

Labrador retriever puppy walking on green grass

Sometimes, we want to fix no base href set error with Angular router.

In this article, we’ll look at how to fix no base href set error with Angular router.

How to fix no base href set error with Angular router?

To fix no base href set error with Angular router, we add the base element into the index.html file.

For instance, we write

<head>
  <base href="/" />
  ...
</head>

to add the <base href="/" /> into the head element in index.html to clear the error.

Conclusion

To fix no base href set error with Angular router, we add the base element into the index.html file.

Categories
Angular Answers

How to get new selection in select in Angular?

Labrador retriever puppy walking on green grass

Sometimes, we want to get new selection in select in Angular.

In this article, we’ll look at how to get new selection in select in Angular.

How to get new selection in select in Angular?

To get new selection in select in Angular, we can watch the change event.

For instance, we write

<select (change)="onChange($event.target.value)">
  <option *ngFor="let i of devices">{{ i }}</option>
</select>

to add a select drop down.

Then in our component, we write

//...
export class Component {
  constructor() {}
  //...
  onChange(deviceValue) {
    console.log(deviceValue);
  }
}

to add the onChange method, which runs when we change selection since we have

(change)="onChange($event.target.value)

in the select.

Then we get the selected value from the parameter.

Conclusion

To get new selection in select in Angular, we can watch the change event.

Categories
Angular Answers

How to style child components from parent component’s CSS file with Angular?

Labrador retriever puppy walking on green grass

Sometimes, we want to style child components from parent component’s CSS file with Angular.

In this article, we’ll look at how to style child components from parent component’s CSS file with Angular.

How to style child components from parent component’s CSS file with Angular?

To style child components from parent component’s CSS file with Angular, we can set the encapsulation option.

For instance, we write

import { ViewEncapsulation } from "@angular/core";

@Component({
  //...
  encapsulation: ViewEncapsulation.None,
})
export class ParentComponent {
  constructor() {}
  //...
}

to set the ParentComponent‘s encapsulation option to ViewEncapsulation.None.

This will let the styles in ParentComponent propagate to its children.

Conclusion

To style child components from parent component’s CSS file with Angular, we can set the encapsulation option.