Angular4 reference html element without using template variable

Question

Is there a way to reference self in html template in angular? I mean something like :

<p-calendar... (click)="self.someOtherMethod()"> ... </p-calendar>

At the moment I can do this like :

<p-calendar... (click)="test(v)" #v>...</p-calendar>

test(v){
v.someOtherMethod();
}

p-calendar is component from Primeng, but what I ask is general Angular stuff.

El houcine bougarfaoui · Accepted Answer · 2017-11-05 10:41:47Z

3

I think you want this :

<p-calendar... (click)="self.someOtherMethod()" #self>...</p-calendar>

answered Nov 5, 2017 at 10:41

El houcine bougarfaoui

37.6k10 gold badges40 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Riscie · Accepted Answer · 2017-11-05 13:13:59Z

0

P-Calendar has an ngModel property. If I understand you correctly, this should be the way to go:

<p-calendar... [(ngModel)]="yourDateModel" (click)="someOtherMethod(yourDateModel)">
.... 
</p-calendar>

In your component, you need to declare the yourDateModel like so:

yourDateModel: Date;

EDIT: This is drifting off a bit, but here is how I implemented the date-range with two calendars: (Maybe I still don't understand correctly?)

HTML

<p-calendar placeholder="Date from..."
        [(ngModel)]="dateRange.from"
        [maxDate]="dateRange.to"></p-calendar>
<p-calendar placeholder="Date to..."
        [(ngModel)]="dateRange.to"
        [minDate]="dateRange.from"></p-calendar>

COMPONENT

dateRange: DateRange;

edited Nov 5, 2017 at 13:13

answered Nov 5, 2017 at 10:28

Riscie

4,9291 gold badge29 silver badges33 bronze badges

7 Comments

Mike Over a year ago

Thanks for your input but no, it has nothing to do with ngModel. I just want to reference 'self' on any tag in template and it should work on any component . In your example someOtherMethod would be defined in component that uses p-calendar in its template, whereas I want to run method defined in p-calendar.

Riscie Over a year ago

Ok I understand. Now in a component you've created your own: Why not just add the (click) to an element inside this component and define your method there?

Mike Over a year ago

Thats where primeng comes in. I wanted to invoke some method declared in their component, which was not visible like onClick. I can do it using template variable, but I don't want to pass it down.

Riscie Over a year ago

Can you explain what you wanted to achieve?

Mike Over a year ago

I got 2 calendars (startDate,endDate) and they set max and min on the other. (I know there is range for that but I have to have 2 calendars) when you set endDate to yesterday and then on startDate click today button it allows to set start>end date which is a bug in my application. I needes to compensate that. I started with custom function onTodayClicked and needed to clear input - passed #self inside and made self.onClearButtonClick. It almost worked. I was curious is there a nicer way to run otherMethod from such component

|

Collectives™ on Stack Overflow

Angular4 reference html element without using template variable

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related