CODEWITHSUNDEEP
angular
user1231111
user1231111

Reputation: 497

How to pass value to component from html?

I want to pass a static value from html to component but it's just not working, I have been stuck all day long... could you give me some glue? Thanks

component:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'rio-hello',
  template: `<p>Hello, {{name}}!</p>
    <button (click)="greet()">Show Greet</button>
  `,
})
export class HelloComponent {
  @Input()
  name: string;

  greet(){
    console.log(`Hello,${name}`);
  }
}

entry html index.html

<rio-hello name="World"></rio-hello>

What I'm expecting is it can print Hello, World on the page and name property can be set to World in component, how to make it?

Upvotes: 0

Views: 158

Answers (1)

pzaenger
pzaenger

Reputation: 11973

You need to add this to refer name since it is part of your instance of HelloComponent:

greet() {
  console.log(`Hello, ${this.name}`);
}

Your template looks fine.

Edit: Since you are using @Input in a bootstrapped component, it seems not possible to do so:

Upvotes: 1

Related Questions