Category: JavaScript

Sometimes, we want to add routing with hashtag to page anchor with Angular.

In this article, we’ll look at how to add routing with hashtag to page anchor with Angular.

How to add routing with hashtag to page anchor with Angular?

To add routing with hashtag to page anchor with Angular, we can get the hash value and call scrollIntoView to scroll to the element with the given hash value as the ID.

For instance, we write

<a [routerLink]="['somepath']" fragment="Test">go to test</a>

in a template or

this._router.navigate(["/somepath", id], { fragment: "test" });

to navigate to /somepath.

The fragment property or attribute is set to the hash value.

Then in the destination component, we write

import { ActivatedRoute } from "@angular/router";

export class SearchComponent implements OnInit, AfterViewInit {
  //...
  private fragment: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.fragment.subscribe((fragment) => {
      this.fragment = fragment;
    });
  }

  ngAfterViewInit(): void {
    try {
      document.querySelector("#" + this.fragment).scrollIntoView();
    } catch (e) {}
  }
}

to call document.querySelector("#" + this.fragment).scrollIntoView(); in ngAfterViewInit to scroll to the item with the ID equal to this.fragment.

We watch for hash value changes with

this.route.fragment.subscribe((fragment) => {
  this.fragment = fragment;
});

Conclusion

To add routing with hashtag to page anchor with Angular, we can get the hash value and call scrollIntoView to scroll to the element with the given hash value as the ID.

Sometimes, we want to fix @ViewChild annotation returns undefined with Angular.

In this article, we’ll look at how to fix @ViewChild annotation returns undefined with Angular.

How to fix @ViewChild annotation returns undefined with Angular?

To fix @ViewChild annotation returns undefined with Angular, we can watch the @ViewChild for changes.

For instance, we write

import {
  Component,
  ViewChildren,
  OnInit,
  AfterViewInit,
  QueryList,
} from "@angular/core";
import { GridComponent } from "@progress/kendo-angular-grid";

export class SearchComponent implements OnInit, AfterViewInit {
  //...
  @ViewChildren("searchGrid")
  public Grids: QueryList<GridComponent>;

  private SearchGrid: GridComponent;

  public ngAfterViewInit(): void {
    this.Grids.changes.subscribe((comps: QueryList<GridComponent>) => {
      this.SearchGrid = comps.first;
    });
  }
}

to call this.Grids.changes.subscribe in ngAfterViewInit to watch for changes in the Grids @ViewChild variable.

We call it with a callback that gets the element nodes QueryList list value.

And we get the element from comps.first when it changes.

Conclusion

To fix @ViewChild annotation returns undefined with Angular, we can watch the @ViewChild for changes.

Sometimes, we want to declare a variable in a template in Angular.

In this article, we’ll look at how to declare a variable in a template in Angular.

How to declare a variable in a template in Angular?

To declare a variable in a template in Angular, we can use ng-template.

For instance, we write

<ng-template
  #selfie
  [ngTemplateOutlet]="selfie"
  let-a="aVariable"
  [ngTemplateOutletContext]="{ aVariable: 123 }"
>
  <div>
    <span>{{ a }}</span>
  </div>
</ng-template>

to define the template variable a with

let-a="aVariable"

We set the variable’s value to aVariable.

And we set aVariable‘s value with

[ngTemplateOutletContext]="{ aVariable: 123 }"

Then in the span inside ng-template, we render a.

Conclusion

To declare a variable in a template in Angular, we can use ng-template.

Sometimes, we want to add innerHTML styling with Angular.

In this article, we’ll look at how to add innerHTML styling with Angular.

How to add innerHTML styling with Angular?

To add innerHTML styling with Angular, we call sanitizer.bypassSecurityTrustHtml to allow style tag code to be rendered.

For instance, we write

import { DomSanitizer } from "@angular/platform-browser";

@Component({
  // ...
})
class SomeComponent {
  constructor(private sanitizer: DomSanitizer) {}

  transformYourHtml(htmlTextWithStyle) {
    return this.sanitizer.bypassSecurityTrustHtml(htmlTextWithStyle);
  }
}

to call this.sanitizer.bypassSecurityTrustHtml with the htmlTextWithStyle HTML string to return the HTML string that can be rendered in the template.

The returned HTML can include style attribute and elements so we can render the styles with [innerHTML].

Conclusion

To add innerHTML styling with Angular, we call sanitizer.bypassSecurityTrustHtml to allow style tag code to be rendered.

Sometimes, we want to go back last page with Angular.

In this article, we’ll look at how to go back last page with Angular.

How to go back last page with Angular?

To go back last page with Angular, we can call the location.back method.

For instance, we write

import { Component } from "@angular/core";
import { Location } from "@angular/common";

@Component({
  // ...
})
class SomeComponent {
  constructor(private location: Location) {}

  backClicked() {
    this.location.back();
  }
}

to inject location in the `constructor.

Then in the onClick method, we call this.location.back to go back to the last page.

How to go back last page with Angular?

To go back last page with Angular, we can call the location.back method.