thank you Günter and Eudes!
Just a couple of edits in the event that someone else stumbles upon the
same issue.
--------------------------- file myComponent.ts---------------------
import {Component, Output, EventEmitter} from 'angular2/core';
@Component({
selector: 'my-component',
template: '<div>****************************************</div>'
})
export class MyComponent {
@Output() someFieldChange: EventEmitter<string> = new EventEmitter();
ngOnInit() {
this.someFieldChange.emit('someText');
}
}
--------------------------- file subcomponentThree.ts---------------------
import {Component, Input, Output, EventEmitter} from 'angular2/core';
import {ZipCodes} from '../../common/zipCodes';
import {IntervalDir} from './intervalDir';
@Component({
selector: 'subcomponentThree',
templateUrl: `
<div>subcomponentThree`,
directives: [IntervalDir]
})
export class SubcomponentThree {
@Input() person:any;
@Input() address:any;
zipCode:string;
zipCodes:ZipCodes;
constructor(private _ZipCodes:ZipCodes) {
this.zipCodes = _ZipCodes;
}
ngOnInit() {
this.zipCode = this.zipCodes.getZipCode(this.address['region'],
this.address['city'], this.address['street']);
}
onFieldChange(event:any) {
console.log(event);
}
}
On Tuesday, January 12, 2016 at 4:25:59 AM UTC-5, Günter Zöchbauer wrote:
>
> Thanks for pointing that out!
>
>
> On Tuesday, January 12, 2016 at 9:52:40 AM UTC+1, Eudes Petonnet wrote:
>>
>> console.log and other global namespace variables are not accessible from
>> a template expression. You only have access to the expression context,
>> which in your case is basically your component.
>>
>> So Günter's example should be:
>>
>> @Component(
>> selector: 'my-component',
>> template: '<div>my-component</div>'
>> )
>> export class MyComponent implements OnInit {
>> @Output() someFieldChange: EventEmitter = new EventEmitter();
>> ngOnInit() {
>> someFieldChange.emit('someText');
>> }
>> }
>>
>> @Component(
>> selector: 'app-element',
>> directives: [MyComponent],
>> template: '<div>app-element</div><my-component
>> (someFieldChange)="onFieldChange($event)"></my-component>'
>> )
>> export class AppElement {
>> onFieldChange(event) {
>> console.log(event);
>> }
>> }
>>
>>
>> On Tuesday, January 12, 2016 at 8:55:34 AM UTC+1, Günter Zöchbauer wrote:
>>>
>>> Hard to tell what your problem is.
>>> A simple example (not tested)
>>>
>>> @Component(
>>> selector: 'my-component',
>>> template: '<div>my-component</div>'
>>> )
>>> export class MyComponent implements OnInit {
>>> @Output() someFieldChange: EventEmitter = new EventEmitter();
>>> ngOnInit() {
>>> someFieldChange.emit('someText');
>>> }
>>> }
>>>
>>> @Component(
>>> selector: 'app-element',
>>> directives: [MyComponent],
>>> template: '<div>app-element</div><my-component
>>> (someFieldChange)="console.log($event)"></my-component>'
>>> )
>>> export class AppElement {
>>> }
>>>
>>>
>>>
>>>
>>>
>>> On Tuesday, January 12, 2016 at 1:07:17 AM UTC+1, michael corbridge
>>> wrote:
>>>>
>>>> Does anyone have a link to an example showing the use of the @Output
>>>> decorator in a component? I have been working with the example in
>>>> angular.io, and I cannot seem to get anything to output to the console
>>>> (much to my frustration)
>>>
>>>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
