Pass Boolean value in a component call from index.html

Question

I have created a component and trying to pass boolean value inside it as @input which will help me to show/hide a div. But it is giving me undefined. can anyone please point out what is wrong in this?

Index.html

<abc-comp x="1" y="64" [showviewmore]="true"></abc-comp>

abc-comp.ts

  @Input() x = '';
  @Input() y = '';
  @Input() showviewmore : boolean;

abc-comp.html

  <div class="col-xs-4" *ngIf="showviewmore">
      //Some Content and tags
  </div>

divya · Accepted Answer · 2022-06-10 07:56:31Z

1

try modified code below

<abc-comp x="1" y="64" [showviewmore]="true"></abc-comp>

abc-comp.tstry

@Input() x = '';
@Input() y = '';
@Input() showviewmore : boolean =false;

edited Jun 10, 2022 at 7:56

answered Jun 9, 2022 at 18:32

divya

3041 silver badge12 bronze badges

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

3 Comments

Ritesh Singh Over a year ago

Hi @Divya, Thank you for posting it. I am able to pass the value. But still, ng-IF is not hiding the div even if the flag value is false. Am I making some mistake here?

divya Over a year ago

@RiteshSingh your approach was correct only you have to define default value inside comp.ts. check updated code

divya Over a year ago

stackblitz.com/edit/angular-11-new-7wlf3y

Collectives™ on Stack Overflow

Pass Boolean value in a component call from index.html

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related