1

I am very new to Angular and am trying to create my first UI.

I have created a custom component, app-dropdown, which is basically a Material select element. (The currencies array is in the component's .ts file)

<mat-form-field>
  <mat-select placeholder="Currency" >
    <mat-option *ngFor="let currency of currencies" [value]="currency">
      {{currency}}
    </mat-option>
  </mat-select>
</mat-form-field>

I have then placed this component inside another custom component, app-buy-card.

<mat-card>
  <p>I have</p><app-dropdown></app-dropdown><br>
  <p>I want</p><app-dropdown></app-dropdown><br>
  <p>I live in</p><app-dropdown></app-dropdown><br>
</mat-card>

When defining the app-dropdown components within the app-buy-card, I want to add an attribute to the opening app-dropdown tag specifying which of the elements should be selected by default. I have tried using binding and two-way binding to achieve this, along with ng-init but I just cannot get it to work. Any ideas?

Wes1324
  • 1,077
  • 8
  • 13

1 Answers1

0

You are looking for @Input.

@Input selectedValue: string;

ngOnInit() {
    // here you can access the selectedValue input
}

And then on the component you are going to use it:

<app-dropdown [selectedValue]="usd">
</app-dropdown>
Gerald Gonzales
  • 533
  • 2
  • 6
  • 20