How to edit css style in typescript?

Question

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!

jitender · Accepted Answer · 2019-10-11 04:11:22Z

2

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

edited Oct 11, 2019 at 4:11

answered Oct 11, 2019 at 4:06

jitender

10.4k1 gold badge22 silver badges49 bronze badges

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

2 Comments

Ren Over a year ago

But how do you set it to true in calling the required in my register component? I need to output that required in my register component in order to add * to my mat select. dropdown-multi-select-search.component.html /.ts is a global component. It is also being used to other modules. That's why it's part of the shared component. If I add the required in my mat-select, It will affect other modules using that component.

jitender Over a year ago

@Ren you are already doing that right way [isRequired]="true">

Collectives™ on Stack Overflow

How to edit css style in typescript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related