Change variable or call funtion from a component from an other component

Question

this is my case :

i have a Component :

@Component({
  selector: 'home',
  templateUrl: './administration.html',

  directives: [Directivetest]
})
export class Administration {
  Hello : string;

  constructor(private http: Http) {
  }

  ngOnInit() {
    //init stuff here
  }

  callMe(value) {
    alert("call you" + this.Hello );
  }
}

and my Template :

<h3>Test Administration </h3>

<directivetest></directivetest>

this is my directive :

@Component({
  selector: 'directivetest',
  templateUrl: './directivetest.html'
})
export class DirectiveTest{

  klickme() {
    //CALL A  Administration  Function (callMe(value)) or change the value????????????
  }
}

Is there a way to change the variable or call a function from my "directive" component,

score 3 · Accepted Answer · answered Jan 21 '16 at 09:42

3

What You should do is :

First make a service ( just like component without any selector)
Put all data and related methods in that service.
Inject this service in both component.

answered Jan 21 '16 at 09:42

binariedMe

4,309
1
18
34

1

i think i misunderstood the logic thank you for showing me the right way ! – user3369579 Jan 21 '16 at 09:49
Yeah... This way only we used to communicate between controllers in angular 1. – binariedMe Jan 21 '16 at 10:23
that means for me to get anytime all big data from the server into my services and from my components i get anything from my Angular services? – user3369579 Jan 21 '16 at 11:02
1

Yes. Also this makes sense as in Java we use dao pattern for data related actions. – binariedMe Jan 21 '16 at 11:19

score 1 · Answer 2 · edited May 23 '17 at 11:46

If you just want to change a value and the directive is used inside the parent elements template just use binding or a mediator service to not tightly couple the directive to a parent component.

If you really need to directly access the parent component see this answer https://stackoverflow.com/a/31796289/217408

@Directive({
  selector : '[layout-item]'
})
export class MyDirective {
  constructor(private _element: ElementRef, private _viewManager: AppViewManager) {
    let hostComponent = this._viewManager.getComponent(this._element);
    // on hostComponent we have our component! (my-component, my-second-component, my-third-component, ... and so on!
  }

}

score 1 · Answer 3 · answered Jan 21 '16 at 10:00

As other said, you can either use directive or service to do something.

Here I'm showing you directive way which is irrelevant to your code.

By Günter Zöchbauer help, I could accomplished this problem Look here . This is a very simple example to start with angular2 directive.

I have a component and directive.

I use directive to update component's view. Moreover directive's changeColor function is getting called with a component's changeColor function.

Component

@Component({
  selector: 'my-app',
  host: {'[style.backgroundColor]':'color',}
  template: `
      <input type="text" [(ngModel)]="color" (blur)="changeColor(color)" />
      <br>
      <span > (span) I'm {{color}} color <span>
      <div mySelectedColor [selectedColor]="color"> (div) I'm {{color}} color </div>
    `,
    directives: [selectedColorDirective]
})


export class AppComponent implements AfterViewInit{
  @ViewChild(selectedColorDirective) myDirective: selectedColorDirective;
  color:string;
  constructor(el:ElementRef,renderer:Renderer) {
    this.color="Yellow";
    //renderer.setElementStyle(el, 'backgroundColor', this.color);
  }
  changeColor(color)
  {
    this.myDirective.changeColor(this.color);
  }
  ngAfterViewInit() {

  }
 }

Directive

@Directive({

  selector:"[mySelectedColor]", 
    host: {
   // '(keyup)': 'changeColor()',
   // '[style.color]': 'selectedColor',
  }

  })

  export class selectedColorDirective { 

    @Input() selectedColor: string = ''; 

    constructor(el: ElementRef, renderer: Renderer) {
      this.el=el;
        this.el.nativeElement.style.backgroundColor = 'pink'; 
      // renderer.setElementStyle(el, 'backgroundColor', this.selectedColor);
    } 

    changeColor(clr)
    {
     console.log('changeColor called ' + clr);
     //console.log(this.el.nativeElement);
     this.el.nativeElement.style.backgroundColor = clr;
     }

 }

Change variable or call funtion from a component from an other component

3 Answers3