Change variable in subcomponent angular 2+

Question

I am trying to add a class to an element in a child component when a button is clicked in the parent component.

For this I have a button in the parent component to change a variable --

<button type="button" (click)="showModal=true">clicky</button>

and in the child a modal with a directive? to add class when the variable is true.

<div class="modal" [ngClass]="{'show': showModal}" 
     id="exampleModal" tabindex="-1" role="dialog">

If I move the html for the modal to the parent component everything works. What is the easiest way of passing the variable to the child component?

angular.io/guide/component-interaction

Estus Flask
– Estus Flask

2018-02-01 19:39:20 +00:00
Commented Feb 1, 2018 at 19:39 — Estus Flask
– Estus Flask, Commented Feb 1, 2018 at 19:39

Suren Srapyan · Accepted Answer · 2018-02-01 19:39:38Z

2

To pass data into the child components you can use @Input decorator in the child component. This will let parent components to pass data into the child components using binding. This can be in the template of the parent component.

<child-cmp [myParam]='data'></child-cmp>

And child component

@Component({
   selector: 'child-cmp',
   ...
})
export class ChildCmp {
   @Input() myParam: any
}

answered Feb 1, 2018 at 19:39

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

charsi Over a year ago

I am passing the variable as <child-cmp [showModal]='showModal'></child-cmp> but this only works once. After I close the modal by setting the variable back to false the button from the parent no longer works.

DeborahK Over a year ago

If you are expecting the parent to change the value of that property, you need to watch for changes to that property. You can do that with a setter or with the ngOnChanges lifecycle hook.

DeborahK Over a year ago

Let me know if you need sample code of watching for changes to the property @charsi

charsi Over a year ago

@DeborahK I've tried using a setter. I get the value from the parent when it changes from false to true. However when I change it back to false in the child the value in the parent still remains true and hence it does not get sent again. So I am guessing what I need is a two way data binding between the child and parent.

charsi Over a year ago

@DeborahK Any way to push the true value to the child again? even when the value stays true in the parent

|

Collectives™ on Stack Overflow

Change variable in subcomponent angular 2+

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related