I'm new to angular2.in my react project, my component looks like this:
export const DefaultButton = (props: Props) => {
return <button {...props}>{props.children}</button>
}
<DefaultButton>delete</DefaultButton>
ng2:
@Component({
selector: "button-default",
template`<button>{{text}}</button>`,
styleUrls: ["./default.css"]
})
export class ButtonDefaultComponent {
@Input() private text: string
}
can i use ng2 like this?
<button-default>delete</button-default>
The other two answers are close, but I think what you want is in the comment by @yurzui. You don't need an @Input decorated value, if all you're trying to do is pass down the word "delete" like in React. You can just use <ng-content>.
@Component({
selector: "button-default",
template: '
<button>
<ng-content></ng-content>
</button>
',
styleUrls: ["./default.css"]
})
export class ButtonDefaultComponent { }
and
<button-default> Delete </button-default>
If i understood you correctly, you want to have "delete" string inside your component as part of text input variable.
Your ts code is good, just change implementation of component in html:
<button-default [delete]="'delete'"></button-default>
Component
@Component({
selector: "button-default",
template`<button>{{text}}</button>`,
styleUrls: ["./default.css"]
})
export class ButtonDefaultComponent {
@Input("delete") private text: string
}
index
<button-default delete="delete"></button-default>
that is.
ng-contentplnkr.co/edit/31HKgs0zB8ngVlhAC38B?p=preview