Category: Angular

Sometimes, we want to close a dropdown on click outside with Angular.

In this article, we’ll look at how to close a dropdown on click outside with Angular.

How to close a dropdown on click outside with Angular?

To close a dropdown on click outside with Angular, we can use the nativeElement.contains method.

For instance, we write

@Component({
  host: {
    "(document:click)": "onClick($event)",
  },
})
class SomeComponent {
  constructor(private _eref: ElementRef) {}

  onClick(event) {
    if (!this._eref.nativeElement.contains(event.target))
      // ...
      doSomething();
  }
}

to create the SomeComponent component.

We make the component run the onClick method when we click on anywhere on the page with

@Component({
  host: {
    "(document:click)": "onClick($event)",
  },
})

And then we check !this._eref.nativeElement.contains(event.target) to make sure the click is outside of the current element before we call doSomething.

Conclusion

To close a dropdown on click outside with Angular, we can use the nativeElement.contains method.

Sometimes, we want to render a component without its wrapping tag with Angular.

In this article, we’ll look at how to render a component without its wrapping tag with Angular.

How to render a component without its wrapping tag with Angular?

To render a component without its wrapping tag with Angular, we can use attribute selectors.

For instance, we write

@Component({
  selector: "[myTd]",
  //...
})
export class ChildComponent {
  //...
}

to set the selector of the component to '[myTd]'.

Then in the parent component, we add

<td myTd></td>

to render the content of ChildComponent in the td element.

Conclusion

To render a component without its wrapping tag with Angular, we can use attribute selectors.

Sometimes, we want to pass data between two components in Angular.

In this article, we’ll look at how to pass data between two components in Angular.

How to pass data between two components in Angular?

To pass data between two components in Angular, we can use Input.

For instance, we write

import { Component, Input } from "angular2/core";

@Component({
  selector: "child",
  styles: [``],
  template: ``,
})
export class ChildComponent {
  @Input() valueToPass = 0;
}

to add the valueToPass Input.

Then in the parent, we write

<child [valueToPass]="value"></child>

to add the child component in the template and get the valueToPass value and assign it to value in the parent.

Conclusion

To pass data between two components in Angular, we can use Input.

Sometimes, we want to use ::ng-deep with Angular.

In this article, we’ll look at how to use ::ng-deep with Angular.

How to use ::ng-deep with Angular?

To use ::ng-deep with Angular, we can add it to a style file and use it to style to style child component styles in the parent component.

For instance, we write

<div
  class="overview tab-pane"
  id="overview"
  role="tabpanel"
  [innerHTML]="project?.getContent('DETAILS')"
></div>

to add a div with dynamic GHTML rendered from project?.getContent('DETAILS') string.

Then we style the dynamic HTML with

.overview {
  ::ng-deep {
    p {
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

Conclusion

To use ::ng-deep with Angular, we can add it to a style file and use it to style to style child component styles in the parent component.

Sometimes, we want to get query params from URL in Angular.

In this article, we’ll look at how to get query params from URL in Angular.

How to get query params from URL in Angular?

To get query params from URL in Angular, we can call the this.activatedRoute.queryParams.subscribe method.

For instance, we write

import { Router, ActivatedRoute, Params } from "@angular/router";
import { OnInit, Component } from "@angular/core";

@Component({
  //...
})
export class MyComponent implements OnInit {
  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.activatedRoute.queryParams.subscribe((params) => {
      const userId = params["userId"];
      console.log(userId);
    });
  }
}

to call this.activatedRoute.queryParams.subscribe with a callback that gets the query parameters.

The callback is called whenever the query parameters change.

And we get the query parameter with the key as we did by using the userId key to get the value of the userId query parameter.

Conclusion

To get query params from URL in Angular, we can call the this.activatedRoute.queryParams.subscribe method.