Passing data from HTML to component Angular 4

Question

I'm new to Angular, and I'm trying to do something which sounds very simple, but which I'm finding very difficult. I've got an *ngFor statement which creates a new div for each item in the collection and displays a value in that div using double braces {{ }}. I want to pass that value into my component.ts but have been unable to figure out how to do so.

Here's one of the things I have tried:

HTML:

<div *ngFor="let auditType of auditTypes; let i=index">
          <br />
          <a (click)="filterByAuditType(auditType)">
              <div [selection]=auditType [id]="'AuditType' + i" class="filterChoices" (click)="highlightSelected($event)">{{auditType}}</div>
          </a>
</div>

The value of "auditType" is what I want to pass in to the component, so I can perform jQuery actions on it.

Component:

export class ComponentTeamsComponent implements OnInit, OnDestroy {
   @Input() selection: string;

 ngOnInit() {
this.checkIfSelected(this.selection);
}

checkIfSelected(selection: string): void {
    $('*').each(function() {
        if ($(this).hasClass('highlightMenu')) {
            if ($(this).attr('id').indexOf('AuditType') > -1) {
                this.filterByAuditType(selection);
            }
         ---  //more code
    }
});

My understanding now is that @Input won't work if the component is on the same level as the HTML (i.e., not a Child component). Please help if you know something that will work.

You have just passed auditType into component by <a (click)="filterByAuditType(auditType)">. Why not just keep it in your component somewhere? — Pengyy
– Pengyy, Commented Sep 8, 2017 at 3:00
@Pengyy I think you have saved me! I can't wait to try it out! — Pismotality
– Pismotality, Commented Sep 8, 2017 at 3:07

Mohammad Tauqir · Accepted Answer · 2017-09-08 03:32:31Z

3

See below example to understand the concept for *ngFor in angular 4.

HTML

<div *ngFor="let Country of countryList; let i=index" (click)="highlightSelected(Country)" name = "name">{{Country.name}}</div>

YourComponent.ts

export class ComponentTeamsComponent implements OnInit, OnDestroy {
   countryList:any[];
   ngOnInit() {


      this.countryList = [
        { name: "United States"},
        {name: "Australia"},
        {name: "Canada"},
        {name: "Brazil"},
        {name: "England"}
      ];
   }


    highlightSelected(selectedCountry) {
       console.log(selectedCountry.name);
       // your rest code goes here
    }
}

answered Sep 8, 2017 at 3:32

Mohammad Tauqir

1,8251 gold badge19 silver badges55 bronze badges

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

Comments

double-beep · Accepted Answer · 2023-04-13 13:02:46Z

3

To pass the data from HTML (template) to TS (component) you can either use two-way data binding by syntax [(ngModel)], or getElementbyID methd. You can learn more about ngModel here.

Example.

HTML:

<input type="text" name="someInput" [(ngModel)]="someInput">

TypeScript:

someInput: String = "";

edited Apr 13, 2023 at 13:02

double-beep

5,67019 gold badges43 silver badges50 bronze badges

answered Mar 1, 2019 at 20:55

ttfreeman

5,5994 gold badges31 silver badges35 bronze badges

Collectives™ on Stack Overflow

Passing data from HTML to component Angular 4

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related