Creating dynamic nested components from json response

Issue I’m trying to created nested dynamic components based on json response. public content={type:’paragraph’,depth:1,text:’Root’,entityRanges:[{type:’LINK’,offset:83,length:16,data:{target:’_self’,url:’/index.htm’}}],embbeded:[{type:’text’,text:’This is Text component’}]} So in the above structure, it as type paragraph so the ParagraphComponent need to render first. It as an array object embbeded, in

Continue reading

Dynamic Component Loading – get component as variable

Issue I’m implementing a relatively complex component loader in Angular, and I’d like to dynamically get the component instance from a rxjs store. loadEditAreaComponent(component: any, componentInstanceData?: {}){ const componentFactory = this.cfr.resolveComponentFactory(component); const viewContainerRef = this.editAreaHost.viewContainerRef; const componentRef = viewContainerRef.createComponent(componentFactory); Object.keys(componentInstanceData).forEach(key

Continue reading

Custom Validator on Angular logic gets implemented successfully but does not show the error message on my web page UI /HTML

Issue so I was doing a custom validator on my Angular form which works in the following way: excerpt from my component.ts file: creteRoute(): FormGroup { return this.fb.group({ ‘departure_airport_id’: [”, Validators.required], ‘departure_airport_code’: [”, Validators.required], ‘route_freequency’: [”, [Validators.required, Validators.pattern("^[0-9]*$")]], ‘arrival_airport_id’: [”,

Continue reading

Angular 5 ng-content issue

Issue I have weird issue when I implement ng-content between two component in Angular 5. This my first component is FooterComponent <div class=”footer”> <ng-content select=”footer”></ng-content> </div> And footer.component.ts import { Component, OnInit } from ‘@angular/core’; @Component({ selector: ‘app-footer’, templateUrl: ‘./footer.component.html’,

Continue reading

PrimeNG p-calendar – disableDate format

Issue I want to disable the dates from primeNG calendar. <p-calendar [(ngModel)]=”dateValue” dateFormat=”dd.mm.yy” [disabledDates]=”[here are the dates]”></p-calendar> For example I want to disable the dates from calendar except today and tomorrow. Solution Instead of using disabledDates, you should use minDate

Continue reading

PrimeNG calendar is not working as expected in Angular5

Issue I am using PrimeNG calendar for date of birth field. I am using yearNavigator and yearRange. The user can select max value is 12 years back before the current year. <p-calendar formControlName=”dob” class=”” id=”dob-registration” dateFormat=”dd/mm/yy” placeholder=”DD/MM/YYYY” readonlyInput=”true” [monthNavigator]=”true” [yearNavigator]=”true”

Continue reading

Event onValueChange on a date. PrimeNG 5.2.4

Issue I am trying to use the event onValueChange, according to the PrimeNG documentation, but it does not work. View <p-calendar (onValueChange)=”changeFechaFinEstimada()” [(ngModel)]=”empleado.fechaFinEstimada” [locale]=”es” dateFormat=”dd-mm-yy” [showIcon]=”true” name=”fechaFinEstimada” id=”field_caducidad” [monthNavigator]=”true” [yearNavigator]=”true” yearRange=”2018:2030″></p-calendar> Controller changeFechaFinEstimada() { console.log(empleado); } Solution onValueChange event is

Continue reading

Default date in prime-ng calendar

Issue Hi I am trying to use primeng calendar with datatype as string as follows: <p-calendar [styleClass]=”pCalendar” [dataType]=”‘string'” formControlName=”doC” [inputStyleClass]=”priorityDiv” [placeholder]=”‘MM/DD/YYYY'” [showIcon]=”false” [yearNavigator]=”true” [yearRange]=”‘2000:2020′” [monthNavigator]=”true” [(ngModel)]=”doC” [inline]=”false” showTime=”true” hourFormat=”12″ showButtonBar=”true” [minDate]=”minDateValue” (onSelect)=”onDateandTimeSelect($event)” (onInput)=”onDateandTimeSelect($event)”> </p-calendar> I need to set the current

Continue reading

Long Polling in Angular 4

Issue I need to do API calls to display the progress of something. I have created a service which does this every 1.5 seconds Main Component private getProgress() { this.progressService.getExportProgress(this.type, this.details.RequestID); } Services.ts public getExportProgress(type: string, requestId: string) { Observable.interval(1500)

Continue reading

this.results.rulesFired not getting defined

Issue I have the following table rows <tr *ngFor="let firedRule of splitRules(results.rulesFired); let rowNumber = index" [class.added]="isAdd(firedRule)" [class.removed]="isRemove(firedRule)" [class.modified]="isModify(firedRule)"> Here is the splitRules function, which basically takes in a list of rules and break down each rule into new properties:

Continue reading

Can't bind to 'formControl' since it isn't a known property of 'input' – Angular2 Material Autocomplete issue

Issue I am trying to use Angular Material Autocomplete component in my Angular 2 project. I added the following to my template. <md-input-container> <input mdInput placeholder=”Category” [mdAutocomplete]=”auto” [formControl]=”stateCtrl”> </md-input-container> <md-autocomplete #auto=”mdAutocomplete”> <md-option *ngFor=”let state of filteredStates | async” [value]=”state”> {{

Continue reading

Can't bind to 'formControl' since it isn't a known property of 'input' – Angular2 Material Autocomplete issue

Issue I am trying to use Angular Material Autocomplete component in my Angular 2 project. I added the following to my template. <md-input-container> <input mdInput placeholder=”Category” [mdAutocomplete]=”auto” [formControl]=”stateCtrl”> </md-input-container> <md-autocomplete #auto=”mdAutocomplete”> <md-option *ngFor=”let state of filteredStates | async” [value]=”state”> {{

Continue reading