Menu
Am trying to update the label of the button on click event. I have the following code . The method setText() is not getting called on click event.
Also if try including the call in template itself as
<button (click)="setText('new name')"></button>
it works.
But I want to expose this api and want to call the method like
<mybutton (click)="setText('new name')"></button>
Can someone advise what is the mistake here? I am using angular2 beta.
app.ts
import {Component, View, Input, Output, EventEmitter} from 'angular2/core';
@Component({
selector: 'mybutton',
})
@View({
template: `<button>{{label}}</button>`
})
export class MyButton {
@Input() label: string;
@Output() click = new EventEmitter();
setText(newName: string) {
this.label = newName;
}
}
index.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<!-- 1. Load libraries -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages : {
app : {
format : 'register',
defaultExtension : 'js'
}
}
});
System.import('app/boot').then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<mybutton [label]="'My Button'" (click)="setText('New Name')" ></mybutton>
</body>
</html>
780
In fact, when defining an @Ouput, it means that you want your component to emit an event
click.emit(null);
What is a bit strange with your code is that you try to manage an internal event of your component externally. So I don't think you need this Output in your component...
Using the following code, you want to handle the click event for your component in the parent component. So the setText method would be one of in this parent component (not one in the child component).
<mybutton (click)="setText('new name')"></button>
If you want to interact with the mybutton component to update its button label on a click event, you can get a reference to this component and update the label attribute.
@Component({
(...)
template: `
<mybutton #comp (click)="comp.label = 'new name'"></button>
`,
directives: [ MyButton ]
})
(...)
Here is the code of your mybutton component:
@Component({
selector: 'mybutton',
template: `<button>{{label}}</button>`
})
export class MyButton {
@Input() label: string;
constructor() {
this.label = 'test';
}
setText(newName: string) {
this.label = newName;
}
}
Thierry
102
Just use
template: `<button (click)="setText()">{{label}}</button>`
and in your index.html just <mybutton></mybutton>
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
