Categories
Angular Answers

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

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.

Categories
Angular Answers

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

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.

Categories
Angular Answers

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

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.

Categories
Angular Answers

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

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.

Categories
Angular Answers

How to disable button in 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.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.