CODEWITHSUNDEEP
angulartypescript
Ren
Ren

Reputation: 57

How to edit css style in typescript?

I am planning to change a component to required but the component is a shared component so it won't take effect on my HTML view. How do you make your component to required?

register.component.html

<app-dropdown-multi-select-search fxFlex *ngIf="(register$ | async)?.skills"
                                          [dataList]="(register$ | async)?.skills" [placeHolder]="'Skills'"
                                          [multiSelectDropdown]="true" [searchItem]="true"
                                          (selectedItemEmitted)="handleSelectChange($event)" 
                                          [isRequired]="true">
        </app-dropdown-multi-select-search>

dropdown-multi-select-search.component.ts

@Input()
public isRequired = false;

if(this.isRequired == true) {
  this.isRequired
}

dropdown-multi-select-search.component.html

<mat-form-field *ngIf="dataList">
  <mat-select #multiSelect [placeholder]="placeHolder" name="multi-select-dropdown" 
  [multiple]="multiSelectDropdown" (selectionChange)="onSelect($event)" [isRequired]="false">
<mat-option>

I don't know what to put inside my if condition. Inside it I want the component to be required once I set it to "true".

Thanks ahead!

Upvotes: 3

Views: 423

Answers (1)

jitender
jitender

Reputation: 10429

Simple add required attribute binding to your mat-select like

 <mat-select #multiSelect [placeholder]="placeHolder" name="multi-select-dropdown" 
  [multiple]="multiSelectDropdown" (selectionChange)="onSelect($event)" [required]="isRequired">

In ts file you don't need extra code just @Input is fine so it should be

@Input() isRequired = false;

demo

Upvotes: 2

Related Questions