Angular 8 - Copy select value in another component

Question

I'm learning Angular, i need to pass a select value to a "p" in another component. So when the value of the select changes the "p" element also changes.

app.component.html

<navbar></navbar>
<todo-list-cards></todo-list-cards>
<test></test>
<router-outlet></router-outlet>

todo.component.html

<div class="contenedorTareas">
    <div class="card text-white bg-primary mb-3" id="cards" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
            <h5 class="card-title">Primary card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                content.</p>
            <select name="selector" id="selector">
                <option>Option 1</option>
                <option>Option 2</option>
            </select>
        </div>
    </div>
    <div class="cards">
        <div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
            <div class="card-header">Header</div>
            <div class="card-body">

            </div>

        </div>
    </div>

</div>

test.component.html

<p><!-- Here the value of the <select> should be--></p>

You need to provide more information about the relationship between the `todo` and `test` components. Is it parent-child, siblings, other.. ? — CornelC, Feb 04 '20 at 13:07
Does this answer your question? [Angular 2 Sibling Component Communication](https://stackoverflow.com/questions/35884451/angular-2-sibling-component-communication) — CornelC, Feb 04 '20 at 13:14

score 0 · Answer 1 · answered Feb 04 '20 at 13:08

0

Best in my opinion is to bind the selected value and the paragraph content using a service. Try adding todo.service.ts with the following:

private selected: string;
public get selectedValue() {
    return this.selected;
  }
public setSelectedValue(value: string){
    this.selected = value;
}

Then, in todo update the value in the service, and in test simply get it into the

:

<p>{{todoService.SelectedValue}}</p>

answered Feb 04 '20 at 13:08

Dani Toker

406
6
19

todo can use the select action to update the service todoService.setSelectedValue(selectedValue); – Dani Toker Feb 05 '20 at 05:19

score 0 · Answer 2 · answered Feb 04 '20 at 13:13

test.component.ts (child component)

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',

})

export Class TestComponent {

@Input() selectedOption: string;

}

Now use that input in your html file.

test.component.html

<p>{{selectedOption}}</p>

When you include your test component in a parent component i.e. todo.component.html you can pass input selectedOption from parent to child as [input] in html tag

<div class="contenedorTareas">
    <div class="card text-white bg-primary mb-3" id="cards" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
            <h5 class="card-title">Primary card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                content.</p>
            <select [(ngModel)]="optionSelected" name="selector" id="selector">
                <option>Option 1</option>
                <option>Option 2</option>
            </select>
        </div>
    </div>
    <div class="cards">
        <div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
            <div class="card-header">Header</div>
            <div class="card-body">

            </div>

        </div>
    </div>

</div>

  <app-test [selectedOption]="optionSelected"></app-test>

todo.component.ts parent component

export class TodoComponent {

optionSelected: string;
}

Angular 8 - Copy select value in another component

2 Answers2