How to pass the multiple values from view to method without two way binding?

Question

I have the dropdown(Route type in Code) while changing the dropdown value, I need to pass the gender value and route type id of the dropdown to my get data method.

Now in my HTML I wrote the only change event, I tried with two-way binding but I am getting the error, what I need, while changing dropdown I need to pass gender value and dropdown id.

HTML File:

<br>
<br>
<div class="text-center">
    <div class="container">
        <div class="jumbotron">
            <form>
                <h3>Manage Content</h3>
                <br>
                <h4>Select Gender:</h4>
                <label class="radio-inline"><input type="radio" #gender name="gender" value="1" checked>Male</label>
                <label class="radio-inline"><input type="radio" #gender name="gender" value="2">Female</label>
                <br>
                <br>
                <h4>Select Routing Type:</h4>
                <div class="row">
                    <div class="col-sm-3"></div>
                    <div class="col-sm-6">
                        <select class="form-control" (change)="getdata()">
                            <option>Choose Route Type</option>
                            <option *ngFor="let manage of dropdown" value="{{manage.Id}}">{{manage.Name}}</option>
                        </select>
                    </div>
                </div>
                <br>
                <br>
                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">Category</th>
                            <th scope="col">Created By</th>
                            <th scope="col">Date Created</th>
                            <th scope="col">File Name</th>
                            <th scope="col">File</th>
                        </tr>
                    </thead>
                    <tbody>
                        <ng-template [ngTemplateOutlet]="tmplt"></ng-template>
                    </tbody>

                </table>
                <input class="btn btn-primary" (click)="Save()" type="button" value="Save" />
                <input class="btn btn-danger" type="button" value="Cancel" />
            </form>
        </div>
    </div>
</div>
<ng-template #tmplt>
    <tr *ngFor="let manage of managecontent; let i =index">
        <td *ngIf="manage.CategoryTypeId == 1">{{manage.Categorytype[0]}}</td>
        <td *ngIf="manage.CategoryTypeId == 2">{{manage.Categorytype[1]}}</td>
        <td>{{manage.CreatedBy}}</td>
        <td>{{manage.CreatedDate}}</td>
        <td>{{manage.DocumentDetails.DocName}}</td>
        <td>
            <app-file-upload [documentModel]="manage.DocumentDetails" [isMultipleFile]="true" [model]="manage" (emitterFile)="fileSelect($event)"></app-file-upload>
        </td>
        <td>
            <input class="btn btn-danger" type="button" value="Remove" (click)="Delete(manage.DocumentDetails.Id)" />
        </td>
    </tr>
</ng-template>

TS File:

import { Component, OnInit, TemplateRef, ViewChild } from "@angular/core";
import { ManageContentService } from "../Service/managecontent.service";
import { ManageContentModel, dropdownmodel } from "../Model/managecontent.model";
import { DocumentDetails } from "../Model/document.model";
import { CommonModule } from '@angular/common';
import { Observable } from 'rxjs/Rx';




@Component({
    selector: 'manage-content',
    templateUrl: './app/QadAdminConfig/Templates/managecontent.component.html',
    providers: [ManageContentService]
})


export class ManageContentComponent implements OnInit {

    data: any;
    result: any;
    dropdown: Array<dropdownmodel> = [];
    managecontent: Array<ManageContentModel> = [];
    content: ManageContentModel;

    @ViewChild("tmplt") tmpltTbl: TemplateRef<any>;



    ngOnInit() {
        this.getRouType();
        this.getdata(1, 1);
    }

    constructor(private _managecontentService: ManageContentService) {

    }

    fileSelect(model: ManageContentModel) {

        this.managecontent.forEach(x => {
            if (JSON.stringify(x) == JSON.stringify(model))
                x = model;
        });
        console.log(this.managecontent);
    }


    getRouType() {
        this._managecontentService.GetRouteType().subscribe(
            data => {
                if (data.Success) {
                    this.dropdown = data.Result as dropdownmodel[];
                }
            });
    }

    getdata(gender: number, routetypeid: number) {
        this._managecontentService.Get(gender, routetypeid).subscribe(
            data => {
                if (data.Success) {
                    this.managecontent = data.Result;
                    console.log(this.managecontent);
                }
            });
    }

    Delete(Id: number) { 
        this._managecontentService.Delete(Id).subscribe(data => {

        });
    }

    Save() {
        console.log('model:', this.managecontent);
        this._managecontentService.Save(this.managecontent).subscribe(x => {
            this.result = x;
            console.log(this.result);
        });

    }
}

Please go through this link .https://stackoverflow.com/questions/33700266/how-can-i-get-new-selection-in-select-in-angular-2 — Shakeer Hussain, Jan 02 '18 at 18:20
in change event, i need to pass the two values one is dropdown value and another is gender value. — Arun Kumar, Jan 02 '18 at 19:23
I can pass the drop-down value like (change)="getdata($event.target.value)" ,in this event i need to pass the gender value also — Arun Kumar, Jan 02 '18 at 19:26

score 0 · Accepted Answer · answered Jan 02 '18 at 19:00

You can do this by changing your inputs to the following:

<label class="radio-inline"><input type="radio" #male name="gender"  value="1" checked>Male</label> // changed selector from #gender to #male
<label class="radio-inline"><input type="radio" #female value="2" name="gender">Female</label> // changed selector from #gender to #female

and modifying your (change) binding to this:

<select class="form-control" (change)="getdata(male.checked ? 1: 2, $event.target.value)">

How to pass the multiple values from view to method without two way binding?

1 Answers1