Category: Angular Answers

Sometimes, we want to add a conditional class with Angular *ngClass and JavaScript.

In this article, we’ll look at how to add a conditional class with Angular *ngClass and JavaScript.

How to add a conditional class with Angular *ngClass and JavaScript?

To add a conditional class with Angular *ngClass and JavaScript, we can use the class or ngClass attributes.

For instance, we write

<div [class.my_class]="step === 'step1'"></div>

to set the my_class class when step equals 'step1'.

We can also write

<div [ngClass]="{ my_class: step === 'step1' }"></div>

to do the same thing.

Conclusion

To add a conditional class with Angular *ngClass and JavaScript, we can use the class or ngClass attributes.

To scroll to element on click in Angular and TypeScript, we call the scrollIntoView method.

For instance, we write

<button (click)="scroll(target)">Scroll To Div</button>
<div #target>Your target</div>

to add a button and a div in the template.

Then we write

//...
export default class Component {
  //...
  scroll(el: HTMLElement) {
    el.scrollIntoView();
  }
}

to add the scroll method into the Component component.

We call el.scrollIntoView to scroll to the el element, which is the div.

To make button disabled in Angular, we set the [disabled] attribute.

For instance, we write

<button [disabled]="!editmode ? 'disabled' : null" (click)="loadChart()">
  <div class="btn-primary">Load Chart</div>
</button>

to set the [disabled] attribute to 'disabled' if editmode is false.

Otherwise, we set it to null to keep the button enabled.

Sometimes, we want to set Angular background image with TypeScript.

In this article, we’ll look at how to set Angular background image with TypeScript.

How to set Angular background image with TypeScript?

To set Angular background image with TypeScript, we set the [style.background-image] attribute.

For instance, we write

<div [style.background-image]="'url(/images/' + imgUrl + ')'"></div>

to set the [style.background-image] attribute to the string with the URL of the background image.

Conclusion

To set Angular background image with TypeScript, we set the [style.background-image] attribute.

Sometimes, we want to reload current page with Angular.

In this article, we’ll look at how to reload current page with Angular.

How to reload current page with Angular?

To reload current page with Angular, we call navigateByUrl and navigate.

For instance, we write

await this.router.navigateByUrl("", { skipLocationChange: true });
this.router.navigate(["/launchpad"]);

to call navigateByUrl and navigate to reload the /launchpad page.

this.router is a Router instance.

Conclusion

To reload current page with Angular, we call navigateByUrl and navigate.