Home Pass info from template to component via ngModel
Reply: 0

Pass info from template to component via ngModel

user1601
1#
user1601 Published in April 25, 2018, 6:05 pm

I am trying to pass some string data or more specifically URL from the HTML template to component on button click. This is what I am doing.

  1. I have imported ONLY FormsModule in app-module.

  2. Then in the component where I need to display all this i.e home component, I have not imported anything.

  3. This is my HTML code:

    <div class="card-body">
        <h5 class="card-title">{{house.name | uppercase}}</h5>
        <p class="card-text card-text2">{{house.words | uppercase}}</p>
    
        <p  name="houseUrl" [(ngModel)]="houseUrl" #UrlForHouse="ngModel" >{{house.url | uppercase}}</p>
        <a  class="btn btn-primary" (click)="printHouseUrlInConsole(UrlForHouse.value)">Print URL In Console</a>
    </div>
    
  4. and then the method in component:

    public houseUrl:string;
    public printHouseUrlInConsole(url:string):any {
    console.log(url);
    }
    

    Now unfortunately it is returning a null value in console log and an error: No value accessor for form control with name: 'houseUrl'.

    I don't know how to pass, I just saw that we need to use ngModel and that's why I did so, I do not know how to implement ngModel.

  5. Also I don't want to show the URL to public I just want its value and send it to component by ngModel, so how to achieve all of this?

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.324348 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO