Category: Angular

Sometimes, we want to append HTML to container element in Angular and TypeScript.

In this article, we’ll look at how to append HTML to container element in Angular and TypeScript.

How to append HTML to container element in Angular and TypeScript?

To append HTML to container element in Angular and TypeScript, we set the [innerHtml] attribute.

For instance, we write

this.htmlToAdd = '<div class="two">two</div>';

to set the htmlToAdd instance variable to a HTML string.

Then we render the content by writing

<div [innerHtml]="htmlToAdd"></div>

to set [innerHtml] to htmlToAdd to render the htmlToAdd string as raw HTML.

Conclusion

To append HTML to container element in Angular and TypeScript, we set the [innerHtml] attribute.

Sometimes, we want to generate command model in Angular Project with Angular-CLI.

In this article, we’ll look at how to generate command model in Angular Project with Angular-CLI.

How to generate command model in Angular Project with Angular-CLI?

To generate command model in Angular Project with Angular-CLI, we generate a class.

For instance, we run

ng generate class hero --type=model

to generate the hero model class.

We set the type option to model to generate a model class.

Then we get the hero.model.ts file as a result.

Conclusion

To generate command model in Angular Project with Angular-CLI, we generate a class.

Sometimes, we want to fix Cannot find module ‘typescript’ in Angular.

In this article, we’ll look at how to fix Cannot find module ‘typescript’ in Angular.

How to fix Cannot find module ‘typescript’ in Angular?

To fix Cannot find module ‘typescript’ in Angular, we run a few npm commands.

We run

npm install -g typescript

to install the typescript module.

And then we run

npm link typescript

to make the typescript module available to the Angular project.

Conclusion

To fix Cannot find module ‘typescript’ in Angular, we run a few npm commands.

Sometimes, we want to redirect to an external URL from Angular route without using component.

In this article, we’ll look at how to redirect to an external URL from Angular route without using component.

How to redirect to an external URL from Angular route without using component?

To redirect to an external URL from Angular route without using component, we can set window.location.href to a value in our code.

For instance, we write

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "redirect",
  template: "redirecting...",
})
export class RedirectComponent implements OnInit {
  constructor() {}

  ngOnInit() {
    window.location.href = "http://www.example.com";
  }
}

to create the RedirectComponent that redirects to http://www.example.com with

window.location.href = "http://www.example.com"

when the component mounts.

Conclusion

To redirect to an external URL from Angular route without using component, we can set window.location.href to a value in our code.

Sometimes, we want to call a method in the child component with Angular.

In this article, we’ll look at how to call a method in the child component with Angular.

How to call a method in the child component with Angular?

To call a method in the child component with Angular, we can use ViewChild.

For instance, we write

@Component({
  // ...
})
export class Parent {
  @ViewChild(Child) child: Child;

  incrementSonBy5() {
    this.child.updateData(this.child.data + 5);
  }
}

to create the Parent component.

We reference the Child component with @ViewChild(Child) child: Child;.

Then we get the properties and methods in Child with this.child.

Next, we add the Child component with

@Component({
  // ...
  template: `{{ data }}`,
  // ...
})
export class Child {
  data: number = 3;

  constructor() {}

  updateData(data: number) {
    this.data = data;
  }
}

We add the data property and the updateData component method that were referenced in Parent.

Conclusion

To call a method in the child component with Angular, we can use ViewChild.