2

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.

0

2 Answers 2

3

I think you want this :

<p-calendar... (click)="self.someOtherMethod()" #self>...</p-calendar>
Sign up to request clarification or add additional context in comments.

Comments

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;

7 Comments

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.
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?
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.
Can you explain what you wanted to achieve?
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
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.