Access an instance of a component and change its value in angular 6

Question

<rio-hello name="World"></rio-hello>
<rio-hello [name]="helloName"></rio-hello>

onClick of the first component I want to change the value of the second component
The value (the name) should be changed from "helloworld" to "myworld". Both components are loaded on the same page. How can I differentiate between them and change the value?
If both are loaded dynamically how can I access the instance and change value dynamically?

Small example: https://stackblitz.com/edit/angular-iew4mn

in this dynamically loaded component not mentioned

Please share a [mcve](https://stackoverflow.com/help/mcve) using e.g. [stackblitz](https://stackblitz.com/). — coreuter, Sep 07 '18 at 06:32
@coreuter thanks for your time . https://stackblitz.com/edit/angular-iew4mn — vimalkovath, Sep 07 '18 at 06:59
@vimalkovath do I understand correctly: you have a list of names. To show the names you loop over the names with *ngFor and use your HelloComponent to display them. If you click on the first name, you want to change the name within your second HelloComponent? Will there always be just two instances of HelloComponent? — coreuter, Sep 07 '18 at 07:16
@coreuter ,yes exactly. So the component loaded dynamically but i want to do this first so that i can find the answer of that — vimalkovath, Sep 07 '18 at 07:41

score 0 · Accepted Answer · answered Sep 07 '18 at 07:53

I've create a stackblitz building up on your example which makes it possible to change the name of a HelloComponent by clicking on another HelloComponent

Explanation

In order to access different instances of a Component (HelloComponent) I used a service (HelloService) which "knows" about the existence of every HelloComponent-Instance.

import { Injectable } from '@angular/core';
import { HelloComponent } from './hello.component';

@Injectable({
  providedIn: 'root',
})

export class HelloService {
  helloCompoents = {}

  constructor() { }

  add(_id: number, _component: HelloComponent) {
    // store a reference to the component and use the components id as identifier
    this.helloCompoents[_id] = _component;
  }

  change(_id) {
    // here you can define the new name
    this.helloCompoents[_id].name = 'some other name'
  }

}

The service is quite simple. All it does is provide

a function to add a new HelloComponent-instance to an object helloComponents (id as key, HelloComponent-instance as value) and
a function which enables you to change the name of an HelloComponent-instance by using the id of the HelloComponent to identify the component which should be changed.

Since the service doesn't know about any HelloComponent-instances yet, we need to change the HelloComponent:

import { Component, Input, OnInit } from '@angular/core';
import { HelloService } from './hello.service';

@Component({
  selector: 'hello',
  template: `<h1 (click)="change()">Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent implements OnInit {
  @Input() id: number;
  @Input() name: string;
  @Input() changeHelloComponentId: number;

  constructor(private helloService: HelloService) { }

  ngOnInit() {
    // add the current HelloComponent to the list of helloComponents within the service
    this.helloService.add(this.id, this);
  }

  change() {
    // call the change function of the service which will then change the name of the defined HelloComponent
    this.helloService.change(this.changeHelloComponentId);
  }
}

On creation of the HelloComponent-instance now we use HelloService to add the current instance to the helloComponents of the service.

And the click function will call the helloService.change(..) function which then changes the name.

The template of the HelloComponent now looks like this:

<div *ngFor="let list of data ">
    <hello id="{{list.id}}" name="{{ list.name }}" changeHelloComponentId="{{list.changeId}}"></hello>
</div>

I've added id which is the id of the current HelloComponent-instance and changeHelloComponentId which is the id of the HelloComponent-instance whos name should be changed if the current item is clicked.

Lastly you need to change your data-list:

this.data = [
      { id: 0, "name": "rio", changeId: 1 },
      { id: 1, "name": "angu" }]

thank you . it works . checking for dynamic service injection . thank you for your support — vimalkovath, Sep 07 '18 at 18:30

Access an instance of a component and change its value in angular 6

1 Answers1

Explanation