Category: Angular

Sometimes, we want to disable button in Angular.

In this article, we’ll look at how to disable button in Angular.

How to disable button in Angular?

To disable button 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.

Conclusion

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

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.