Category: Angular Answers

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.

Sometimes, we want to detect back button press using router and location.go() with Angular and TypeScript.

In this article, we’ll look at how to detect back button press using router and location.go() with Angular and TypeScript.

How to detect back button press using router and location.go() with Angular and TypeScript?

To detect back button press using router and location.go() with Angular and TypeScript, we can listen to the popstate event.

For instance, we write

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

//...
export class AppComponent {
  //...
  @HostListener("window:popstate", ["$event"])
  onPopState(event) {
    console.log("Back button pressed");
  }
  //...
}

to use HostListener to listen to the window popstate event.

We set onPopState as the event’s handler.

event has the native event object.

Conclusion

To detect back button press using router and location.go() with Angular and TypeScript, we can listen to the popstate event.