Category: Angular

Sometimes, we want to call another components function in Angular.

In this article, we’ll look at how to call another components function in Angular.

How to call another components function in Angular?

To call another components function in Angular, we can inject the component we want to call the function on as a dependency.

For instance, we write

export class OneComponent implements OnInit, AfterViewInit {
  //...
  ngOnInit() {}

  public testCall() {
    alert("I am here..");
  } 
  
  //...
}

to create the OneComponent component that has the public testCall method.

Then in another component, we inject OneComponent as a dependency and call testCall by writing

import { OneComponent } from "../one.component";

@Component({
  providers: [OneComponent],
  selector: "app-two",
  templateUrl: "...",
})
export class TwoComponent implements OnInit, AfterViewInit {
  //...
  constructor(private comp: OneComponent) {}

  public callMe(): void {
    this.comp.testCall();
  }
  //...
}

We put OneComponent in the providers array.

Then we can inject it as a dependency and the call testCall in TwoComponent.

Conclusion

To call another components function in Angular, we can inject the component we want to call the function on as a dependency.

Sometimes, we want to declare dynamic template reference variable inside ngFor with Angular.

In this article, we’ll look at how to declare dynamic template reference variable inside ngFor with Angular.

How to declare dynamic template reference variable inside ngFor with Angular?

To declare dynamic template reference variable inside ngFor with Angular, we can declare one variable.

For instance, we write

<div *ngFor="let member of members">
  <ng-template #popupContent>
    <b>{{ member.name }}</b>
  </ng-template>
  <button
    type="button"
    class="btn btn-secondary"
    [ngbPopover]="popupContent"
    popoverTitle="Fancy content"
  >
    ...
  </button>
</div>

to define the popupContent in the *ngFor loop.

Then we can access all the items with the popupContent ref name from ViewChildren with

export class Component implements OnInit, AfterViewInit {
  //...
  @ViewChildren("popupContent") components: QueryList<CustomComponent>;
  //...
}

in the iterable query list.

Conclusion

To declare dynamic template reference variable inside ngFor with Angular, we can declare one variable.

Sometimes, we want to write data attributes using Angular.

In this article, we’ll look at how to write data attributes using Angular.

How to write data attributes using Angular?

To write data attributes using Angular, we can use the att attribute in our element.

For instance, we write

<ol class="viewer-nav">
  <li *ngFor="let section of sections" attr.data-value="{{ section.value }}">
    {{ section.text }}
  </li>
</ol>

to add the data-value attribute into our li elements with

attr.data-value="{{ section.value }}"

Conclusion

To write data attributes using Angular, we can use the att attribute in our element.

Sometimes, we want to fix Angular error "Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’".

In this article, we’ll look at how to fix Angular error "Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’".

How to fix Angular error "Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’"?

To fix Angular error "Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’", we need to add the FormsModule and ReactiveFormsModule into our NgModule.

For instance, we write

import { BrowserModule } from "@angular/platform-browser";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { NgModule } from "@angular/core";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [FormsModule, ReactiveFormsModule, BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

in app.module.ts to add the FormsModule and ReactiveFormsModule into our imports array in the AppModule.

Then we should be able to use ngModel in our component templates.

Conclusion

To fix Angular error "Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’", we need to add the FormsModule and ReactiveFormsModule into our NgModule.

Sometimes, we want to return data from subscribe with Angular.

In this article, we’ll look at how to return data from subscribe with Angular.

How to return data from subscribe with Angular?

To return data from subscribe with Angular, we can return the map observable.

For instance, we write

export class Component {
  someMethod() {
    return this.http.get(path).map((res) => {
      return res.json();
    });
  }
}

to call http.get to make a get request to the path.

Then we call map with a callback that returns the response JSON with res.json.

We return the map observable so we can call someMethod and chain that with subscribe to listen for emitted values from map to get the response.

Conclusion

To return data from subscribe with Angular, we can return the map observable.