CODEWITHSUNDEEP
htmlangularinputcomponentsinteraction
O.Eight
O.Eight

Reputation: 65

Component Interaction @Input

I would like a component to send input to another component. Below is the code .ts and .html. of the two components. Now the problem is that the html page of the parent component also shows the html part of the child component ... I want the component to pass only one string to the child component

Parent.ts 

import ...

@Component({
  selector: 'app-parent',
  templateUrl: './parent.html',
  styleUrls: ['./parent.css']
})
export class ParentComponent implements OnInit {

  sostegno : string;

  constructor() { }

  ngOnInit() { }

  avvia1() {
    this.sostegno = "xxx";
    this.router.navigate(['./xxx'], { relativeTo: this.route });
  }

  avvia2()
    this.sostegno = "yyy";
    this.router.navigate(['./yyy'], { relativeTo: this.route });
  }
}

Parent.html 

<div>
  ...
</div>
<app-child [sostegno]="sostegno"></app-child>

Child.ts 

import ...

    @Component({
      selector: 'app-child',
      templateUrl: './child.html',
      styleUrls: ['./child.css']
    })
    export class ChildComponent implements OnInit {

      @Input() sostegno : string;

      constructor() { }

      ngOnInit() {
        console.log(this.sostegno);
       }

    }

Upvotes: 2

Views: 56

Answers (1)

Nico
Nico

Reputation: 2021

There are some changes which you need to make because looking at the code which your currently have it seems incomplete.

  1. You are using this.router without injecting the Router class in your constructor.

  2. You are using this.route without injecting the ActivatedRoute class in your constructor.

  3. To test that your parent > child interaction is working you can remove your param and instead place a test for the html

<app-child [sostegno]="'Test'"></app-child>

This should work for your ngOnInit function which is inside of your child component. If this works all you need to do now is either initialize sostegno in your parent component else your console log inside your child component will not reflect the changes when you call avvia1 or avvia2 inside of your parent class.

Hope this helps!

Upvotes: 1

Related Questions