why Input attribute in angular is not taking the value that I sent by the html file?

Question

Hello everyone I have this problem related to Angular.

inside my skills.component.ts .

@Input() testfield ="";

inside skills.component.html

     style="padding: 0 10%"
     class="row align-items-center">
  <p id="skill"
     class="col-2"
     style="font-family: Mulish-Bold, serif; font-size: 1.2rem; text-align: end;"
  >
    {{testfield}}
  </p>
  <p class="col-7" id="bar">

    <ngb-progressbar
      type="success"
      [value]="50">
    </ngb-progressbar>
  </p>
</div>

and inside the component that uses this app-skill-bar .

  <app-section-title color="#84142D" icon="bi bi-star-fill" title="Skills"></app-section-title>
  <app-skill-bar testfield="Android"></app-skill-bar>
</div>

the problem is that angular can't take "Android" as value for testfield. also, it doesn't desplay Android.

Can you share your code or share a link of stackblitz that can reproduce the same issue? — Borad Akash
– Borad Akash, Commented Aug 14, 2022 at 9:51
okay this is the github link github.com/muath-nassar/cv-angular.git — Muath Nassar
– Muath Nassar, Commented Aug 14, 2022 at 10:18
Interesting issue ngOnChanges showing that value updated but input variable not displaying the value in html. Looking into it! — Borad Akash
– Borad Akash, Commented Aug 14, 2022 at 11:12

Borad Akash · Accepted Answer · 2022-08-14 11:29:10Z

1

I checked your project. The input works correctly. The problem is that you create in app.module.ts two independent components trees. The first time a component is loaded, the value "Android" exists, but then the component is quickly reloaded with no value passed. You can analyze this by putting the debugger in ngOnInit method in your SkillBarComponent. All in all, you should remove SkillBarComponent from the bootstrap array.

Since you added SkillBarComponent in bootstrap array, it will be considered as root component and You are passing an input in the root component, which will not work.

edited Aug 14, 2022 at 11:29

Borad Akash

8141 gold badge9 silver badges21 bronze badges

answered Aug 14, 2022 at 11:18

SparrowVic

2112 silver badges11 bronze badges

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

1 Comment

Muath Nassar Over a year ago

Yes, you are right, 😊 , You are very intelligent.

Collectives™ on Stack Overflow

why Input attribute in angular is not taking the value that I sent by the html file?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related