Move logic from html to ts/js angular file?

I need to set my logic in ts file. All logic need to be in ts file instead html. but in my situation logic is in html and i don;t know how to move to ts ? View html : <th class="col col-lg-2 cursor-sort" (click)="sortBy(‘PassengerPriority’)"> Passenger / Account <i *ngIf="sortFilter?.includes(‘PassengerPriority’)" [ngClass]="{‘rotate’: !isDesc}" class="fa fa-arrow-up transition-set"></i> […]

By fipodas
Published
Categorized as angular, javascript, typescript Tagged , ,

Problem showing content below a particular button ? Using Angular 9 and factory resolver

I have a problem that my component is rendered inside a button? Why does it matter? Because the button position is relative and the component is absolute. I need to center popup div (component) inside button to set position relative -> absolute. Check code: <button *ngFor="let button of buttons; let i = index" class="btn btn-primary […]

By fipodas
Published
Categorized as angular, css, html, javascript, typescript Tagged , , , ,

How to exclude to trigger function ? Angular

This link shows the whole problem: https://stackblitz.com/edit/click-outside-directive-angular-army-tttniw?file=src%2Fapp%2Fapp.component.html I need to exclude click on any selected tag p. <div class="open-button" (click)="opened = !opened">Open</div> <div *ngIf="opened" class="menu" (clickOutside)="clickOutside()"> Menu items </div> <p Don’t trigger function clickOutside on click here! </p> <small>Need to open dropdown first and check console</small> and directive : @Output() clickOutside = new EventEmitter(); captured […]

By fipodas
Published
Categorized as angular Tagged

Click outside trigger only except when click on selected tag ( example p tag ) ? Angular 9

Unfortunately, i have to ask this question again. I need to log click outside div except to click on one item. I have directive which work @HostListener(‘document:click’, [‘$event.target’]) public onClick(target: Event) { const clickedInside = this.elementRef.nativeElement.contains(target); if (!clickedInside) { this.clickOutside.emit(); } } <div (clickOutside)="closeDialog()"> <h1> Title </h1> </div> closeDialog(){ console.log(‘test’) } And this is work […]

By fipodas
Published
Categorized as angular, javascript Tagged ,

Click outside except any item ? Angular

I need to log click outside div except to click on one item. I have directive which work @HostListener(‘document:click’, [‘$event.target’]) public onClick(target: Event) { const clickedInside = this.elementRef.nativeElement.contains(target); if (!clickedInside) { this.clickOutside.emit(); } } <div (clickOutside)="closeDialog()"> <h1> Title </h1> </div> closeDialog(){ console.log(‘test’) } And this is work very good but i need to expand this…I […]

By fipodas
Published
Categorized as angular, typescript Tagged ,

InvalidPipeArgument: ‘Unable to convert "24.08.2021/16:34:29/1" into a date’ for pipe ‘DatePipe’

I am create custom date pipe: export class DateFormatPipe implements PipeTransform { transform(date: Date | string, format: string): string | Date { if (format === ‘date’) { return new DatePipe(‘en-US’).transform(date, ‘MM-dd-YYYY’)!; } else if (format === ‘time’) { return new DatePipe(‘en-US’).transform(date, ‘h:mm a’)!; } else { return ” } } } All date work except […]

By fipodas
Published
Categorized as angular Tagged

How to create custom pipe for date ? Angular 2+

I need to create custom date pipe but i have one problem. I need to transform two date. First is date second is time. from this: <span>{{ varDate.pickupDateTime | date: ‘dd/MM/yyyy’ }}</span> <span>{{ varDate.pickupDateTime | date: ‘h:mm a’ }}</span> To: <span>{{ varDate.pickupDateTime | customDatePipe }}</span> <span>{{ varDate.pickupDateTime | customDatePipe }}</span> Problem: can i set both […]

By fipodas
Published
Categorized as angular Tagged

How to delay call function without setTimeout ? Angular

I need to delay call of function for few seconds. I have solution which work but enough good. public recieveNewContact() { this.allData(); setTimeout(() => { this.lastAddedItem() }, 100) } public ngOnInit() { this.allData() } allData() { this.accountsService.getContactPerson().subscribe( (data) => { console.log(data) } ) } This is work good but i don’t like this… I need […]

By fipodas
Published
Categorized as angular, javascript, typescript Tagged , ,

How to call function by order without calling setTimeout ? using Angular

I need to call function only when is first function loaded ? I have choice which work ( but not enough good for me ) allData(){ this.accountsService .getContactPerson() .subscribe( (data: any) => { console.log(data) }, (err: Error) => console.log(err) ) } this.allData() setTimeout(() => { this.lastAddedItem(this.contacts, contact); }, 500); Do I have any better solution […]

By fipodas
Published
Categorized as angular, javascript, typescript Tagged , ,

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq