Issue PrimeNg delivers really good Calendar component which works really fine, but is there a way to close it after choosing 2 dates? <p-calendar [(ngModel)]=”rangeDates” selectionMode=”range” [readonlyInput]=”true”></p-calendar> In documentation I noticed two interesting things as: – Event onSelect, unfortunately it
Continue readingTag: angular
How to remove disabled years from material datepicker?
Issue For material datepicker we can use propery max and min to set range of avaliable years. But, it still display some unavaliable years. Is there any way to remove those years ? Need to remove years from 98-09 Solution
Continue readingWho validates the property?
Issue I’m trying to find the piece of code that is responsible for property value validation. For example I have: <h1 [style.color]=”myColor”> And I bound myColor variable with input: <input (input)=”myColor = $event.target.value”> I expect change of color on input
Continue readingJavascript to Angular 2 : document.querySelector('el').emit('em') to @viewChild
Issue How to convert HTML <a-entity id=”fading-cube” geometry=”primitive: box” material=”opacity: 1″> <a-animation attribute=”material.opacity” begin=”fade” to=”0″></a-animation> </a-entity> JS document.querySelector(‘#fading-cube’).emit(‘fade’); This is my code in Angular 2 that is not working. @ViewChild(‘fading-cube’) fadingCubeInput: any; fadecube(){ this.renderer.setProperty(this.fadingCubeInput.nativeElement,’emit’,”fade”) } Solution To access your element
Continue readingAngular Renderer2 remove listener
Issue Is it possible to remove listeners with the new angular 4 renderer? here is the interface: abstract listen(target: ‘window’ | ‘document’ | ‘body’ | any, eventName: string, callback: (event: any) => boolean | void): () => void; In the
Continue readingHow to keep dynamic popup displaying on hover
Issue I have created a dynamic popup in angular that appears when I hover over span(or button) but disappear when I leave that span. I cannot figure out how to keep that popup displaying when I’m hovering over it. Gotta
Continue readingAngular: How to use shared modules in a Dynamic Component?
Issue I’m creating dynamic component in Angular v6 using compileModuleAndAllComponentsAsync of angular compiler with same below code. viewChangeMethod(view: string) { let template = `<span>${view} </span>`; const tmpCmp = Component({ template: template })(class { }); this._compiler.clearCacheFor(this.tmpModule) this.tmpModule = NgModule({ declarations: [tmpCmp,FRAComponent],import:[ComonModule]
Continue readingAngular: How to use shared modules in a Dynamic Component?
Issue I’m creating dynamic component in Angular v6 using compileModuleAndAllComponentsAsync of angular compiler with same below code. viewChangeMethod(view: string) { let template = `<span>${view} </span>`; const tmpCmp = Component({ template: template })(class { }); this._compiler.clearCacheFor(this.tmpModule) this.tmpModule = NgModule({ declarations: [tmpCmp,FRAComponent],import:[ComonModule]
Continue readingAngular: How to import JitCompilerFactory?
Issue If I use AOT compilation dynamic compilation will not possible. So I need to load the compiler to a browser. So how do I load it? If I use import { JitCompilerFactory } from ‘@angular/compiler’; However, after importing the
Continue readingDynamic Angular component
Issue I have a requirement to add a dynamic component to the Angular application. The idea is to bundle the component in one JavaScript file which will be downloaded on some condition. The whole idea is to ship independent components(features)
Continue readingAccess an instance of a component and change its value in angular 6
Issue <rio-hello name=”World”></rio-hello> <rio-hello [name]=”helloName”></rio-hello> onClick of the first component I want to change the value of the second component The value (the name) should be changed from “helloworld” to “myworld”. Both components are loaded on the same page. How
Continue readingWhy Angular requires us to declare dynamic components in declarations array and entryComponents array?
Issue I was implementing dynamic components for one of my project. The concept of dynamic components is that they come into the memory once they are needed and they have no reference in any template. According to the official docs
Continue readingHow to pass i18n key from parent to child component before translation starts?
Issue I’am using an input-field component which I can embed in different parent components using forms. In the input child component, I have an i18n translation key as variable using interpolation, which I would like to generate dynamically from parent
Continue readingHow to pass i18n key from parent to child component before translation starts?
Issue I’am using an input-field component which I can embed in different parent components using forms. In the input child component, I have an i18n translation key as variable using interpolation, which I would like to generate dynamically from parent
Continue readingTooltip as dynamic component
Issue I want to add tooltip to the svg element, but as a component created dynamically. I add the tooltip to the element, using TooltipDirective on svg element i.e. <circle tooltip [hostContainerRef]=”chartContainerRef” [hostElement]=””>chartElement [data]=”d.tooltip”></circle> The TooltipDirective dyncamically creates TooltipComponent (in
Continue readingUsing a generic Component with resolveComponentFactory result in Component<{}> instead of <T>
Issue I have build a dialog service which dynamically create a DialogComponent with a child component. I want my DialogComponent to be a generic class of <T> since i wish to type for whatever component child i’m using. I’m currently
Continue readingDynamically load nested components in angular?
Issue I want to organise my all tabs components dynamic components. I am using primg ng for ui tabs. Currently my code is allTabs.component.html Before <p-tabPanel header=”Contracts”> <app-a [arrId]=’parrangementId’ *ngIf=”tabIndex==1″></app-a> </p-tabPanel> <p-tabPanel header=”Allocations”> <app-b [arrId]=’parrangementId’ *ngIf=”tabIndex==2″></app-b> </p-tabPanel> </p-tabView> Here each
Continue readingInputs was not working by dynamic component
Issue I implemented with ndc-dynamic for creating dynamic component. It works very well with outputs, but inputs was not working. I will show my code. <ng-container *ngComponentOutlet=”item.widgetComponent; ndcDynamicInputs: inputs; ndcDynamicOutputs: outputs”> in the ts file aButtonDisabled: boolean; bButtonDisabled: boolean; inputs
Continue readingHow to dynamically add angular components to the DOM without a pre-determined ViewContainerRef?
Issue This is a solution I found that I think will be useful to others. This can be applied to any native element that does not have a ViewContainerRef set on it. I am trying to implant an angular component
Continue readingHow to dynamically add angular components to the DOM without a pre-determined ViewContainerRef?
Issue This is a solution I found that I think will be useful to others. This can be applied to any native element that does not have a ViewContainerRef set on it. I am trying to implant an angular component
Continue readingHow to dynamically add angular components to the DOM without a pre-determined ViewContainerRef?
Issue This is a solution I found that I think will be useful to others. This can be applied to any native element that does not have a ViewContainerRef set on it. I am trying to implant an angular component
Continue readingAngular – using how to call function on component created dynamically using ng-dynamic-component
Issue I am using the npm package ng-dynamic-component to create dynamic components. I am in a situation where i want to call a specific function on the dynamically created component using this package. I have experimented with a lot of
Continue readingAngular – using how to call function on component created dynamically using ng-dynamic-component
Issue I am using the npm package ng-dynamic-component to create dynamic components. I am in a situation where i want to call a specific function on the dynamically created component using this package. I have experimented with a lot of
Continue readingDynamically load component into dynamic position
Issue UPDATED (As I understood the issue better): I would like to show a component depending on where the user clicks (which table row), I’m using ng2-smart-table, now the problem is there is no selector to where I need to
Continue readingprevent angular from recursively loading component
Issue I’m loading component dynamically into dynamic position and since that component is a table row I’m using selector: ‘td’ because I need to apply colspan to the dynamically add row then load the dynamic component in it. The problem
Continue readingAngular 6 communicate between 2 components instances through service
Issue I have a component that loads/remove another component dynamically by calling a service. I also give the dynamically add component the ability to remove itself. My problem is notifying the other component that this instance of the dynamic component
Continue readingCreating 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 readingHow to use reactive forms in a dynamic component
Issue Background I receive client generated data from the server that contains HTML that I then use to create a dynamic component that gets injected and displayed in our client. The HTML I receive can contain one or many inputs
Continue readingWhen is OnInit event triggered for a dynamically loaded angular component?
Issue I am dynamically loading an Angular component (MyComponent) with the following code. I am also passing some data to the component after creating it. let componentFactory = this.componentFactoryResolver.resolveComponentFactory(MyComponent); this.viewContainerRef.clear(); let componentRef = this.viewContainerRef.createComponent(componentFactory); (<MyComponent>componentRef.instance).setData(data); When will the OnInit lifecycle
Continue readingpass Dynamic Html element based on options from parent to child component in Angular?
Issue I want to pass html element from parent to child based on conditions like If user click button in parent child should display button or If user select chckbox then child should display checkbox This is my scenario To
Continue readingBest Way To Add Angular Component At RunTime On Click Event
Issue The website I am building has multiple components. On the “Home” page component, when a user clicks a button to add something to the page, I want to append the component of their choice to the “home” component. I
Continue readingHow to remove a component dynamically in angular
Issue I went through angular dynamically loading components. But i could not find how to remove the component dynamically. My requirement is that the chat application loads dynamic component(image/graph/list/table) as per the conversation. But how can i destroy the component
Continue readingHow to dynamically add component to another component in service
Issue I would dynamically component to another component in the service , Firstly inside the service factory both components and I created the component with access to ViewContainer. But the component cannot be create ! Service : @Injectable({ providedIn: ‘root’
Continue readingHow to dynamically add component to another component in service
Issue I would dynamically component to another component in the service , Firstly inside the service factory both components and I created the component with access to ViewContainer. But the component cannot be create ! Service : @Injectable({ providedIn: ‘root’
Continue readingHow to dynamically add component to another component in service
Issue I would dynamically component to another component in the service , Firstly inside the service factory both components and I created the component with access to ViewContainer. But the component cannot be create ! Service : @Injectable({ providedIn: ‘root’
Continue readingLoad dynamic component multiple times with different data
Issue I need to load a dynamic component multiple times and pass data dynamically based on some value so that it will load with runTime data. I have tried below example https://dzone.com/articles/how-to-dynamically-create-a-component-in-angular as per example we have one messageComponent that
Continue readingOutputs on dynamic components without view
Issue On an Angular 8 project i created some dynmic components without a viewref with the following code: const componentFactory = this.componentFactoryResolver.resolveComponentFactory(HelloComponent); const componentRef = componentFactory.create(this.injector); componentRef.changeDetectorRef.detectChanges(); componentRef.instance.slideContentRendered.pipe(first()).subscribe(x => {console.log(‘does not work’, x);}); in the HelloComponent itself i’m waiting for
Continue readingAngular Dynamic Components: How to Set and Get Data
Issue I need to create components dynamically based on a predetermined type, and be able to set and get data from them. Up until now I’m able to create and show the componentes, but I don’t know how to set
Continue readingMatDialogRef textarea scrolls to bottom
Issue I have an app where i use MatDialogRef to open a component as a dialog. The dialog shows a long text, but for some reason, the textarea scrolls to the bottom. This does not happen when it’s not a
Continue readingViewContainerRef vs ngFor
Issue What is better? Use ngFor or ViewContainerRef to dynamically create components? What is the difference? For example, if I have a button to create a new element that every time I press it generates a new component. 1) The
Continue readingAngular component in NgbModal cannot use @viewchild to access methods inside
Issue Im having the following problem, i think its a common case but i havent been able to solve it. I have a small error alert component, which has a method inside to show an error. The way im using
Continue readingCreate dynamic component (ComponentFactoryResolver) with dynamic template
Issue I want to dynamically create a component with a dynamic template, so that interpolations of this template will resolve in the context of the dynamic component. I know that I can use this code to create a dynamic component
Continue readingCreate dynamic component (ComponentFactoryResolver) with dynamic template
Issue I want to dynamically create a component with a dynamic template, so that interpolations of this template will resolve in the context of the dynamic component. I know that I can use this code to create a dynamic component
Continue readingCreate dynamic component (ComponentFactoryResolver) with dynamic template
Issue I want to dynamically create a component with a dynamic template, so that interpolations of this template will resolve in the context of the dynamic component. I know that I can use this code to create a dynamic component
Continue readingDynamic component loader – Cannot read property 'viewContainerRef' of undefined
Issue im following all steps of the ad-banner tutorial on Angular.io. But at the end after all setup, i get an error comming from this component and function: Ad-banner.component TS loadComponent() { this.currentAdIndex = (this.currentAdIndex + 1) % this.ads.length; const
Continue readingDynamic component loader – Cannot read property 'viewContainerRef' of undefined
Issue im following all steps of the ad-banner tutorial on Angular.io. But at the end after all setup, i get an error comming from this component and function: Ad-banner.component TS loadComponent() { this.currentAdIndex = (this.currentAdIndex + 1) % this.ads.length; const
Continue readingAngular: capture an event emmited inside a dynamic container
Issue I don’t know if the title of the question is up to the challenge, but I’m trying to capture an event(click) issued by a dynamic component. My goal is to create a component onClick and destroy it by the
Continue readingPass @Input as Parameters fires Type 'string' has no properties in common with type
Issue I am creating a dynamic tab based components and passing the necessary component properties to build the component through an object. How to pass @Input as a parameter and then use the input with ComponentFactoryResolver and create inputs. Here
Continue readinghaving an empty page while calling a dynamic component angular 9
Issue I try to call a dynamic component from another component but it showing me an empty page This is the dynamic component.ts : @Component({ selector: ‘app-draw-linechart’, templateUrl: ‘./draw-linechart.component.html’, styleUrls: [‘./draw-linechart.component.css’] }) export class DrawLinechartComponent implements OnInit { constructor(private productservice:
Continue readingAngular – change detection in dynamically loaded module/component without using `ChangeDetectorRef`
Issue I compile an Angular module (to load the module dynamically) with compiler’s compileModuleAsync and want to insert a component of the module into view. I tried to insert the component into ViewContainer but the component doesn’t detect changes automatically.
Continue readingDynamic 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 readingWay to inject angular FormBuilder service to dynamic component
Issue I’m trying to inject the FormBuilder service to a dynamic component this way: Template: … <div #vc></div> … Component: @ViewChild(‘vc’, { read: ViewContainerRef }) _container: ViewContainerRef; … constructor(private fb: FormBuilder, private componentFactoryResolver: ComponentFactoryResolver, private _compiler: Compiler, private _injector: Injector,
Continue readingCreating nested dynamic components in angular
Issue I Want to know how to create nested dynamic components and maintains its parent child relationship. For example, I have data like this, – A –A.1 –A.2 -B –B.1 -C I wanted to create the component like this, <A>
Continue readingAngular Dynamically resolved components using nested Reactive Forms with CVA's are not working
Issue Arrgh, Having problems with Dynamically built components using ReactiveForms. Need to trigger and Mat-Dialog and load set of components in it – works fine. Need to build some of the components dynamically from a mapping array – works fine.
Continue readingHow can I scroll into view for dynamic loaded content in Angular 11?
Issue In my app I need to load HTML from a file. This file contains plain HTML code and come anchors. Now, when I click on such an anchor I would like to scroll this anchor into view. Therefore I
Continue readingHow can I scroll into view for dynamic loaded content in Angular 11?
Issue In my app I need to load HTML from a file. This file contains plain HTML code and come anchors. Now, when I click on such an anchor I would like to scroll this anchor into view. Therefore I
Continue readingPrimeNg TabView dynamic component
Issue I am following this approach to dynamically create elements in an AngularApp based on a configuration JSON. Unfortunately that does not seem to work with all of the PrimeNG components. Especially not the TabView which I wanted to utilize
Continue readingWhy is change detection not triggering on nested dynamic component
Issue I have an issue with change detection on nested dynamic component using content projection. Change detection is not triggering automatically on the child component, I have to add manual change detection to every actions. An exemple here : https://stackblitz.com/edit/angular-ivy-k2z661?file=src%2Fapp%2Fapp.component.ts
Continue readingDynamically loaded content in Angular Material Tabs
Issue I’m trying to build a dynamic tab-system from Angular Material: Tabs and I’m running into an issue with the loading of content on subsequent tabs, where the concept only works on the first tab being loaded. Below is the
Continue readingDynamically loaded content in Angular Material Tabs
Issue I’m trying to build a dynamic tab-system from Angular Material: Tabs and I’m running into an issue with the loading of content on subsequent tabs, where the concept only works on the first tab being loaded. Below is the
Continue readingDynamically loaded content in Angular Material Tabs
Issue I’m trying to build a dynamic tab-system from Angular Material: Tabs and I’m running into an issue with the loading of content on subsequent tabs, where the concept only works on the first tab being loaded. Below is the
Continue readingAngular Dynamic Components: @ViewChildren get ViewContainerRef for every component in QueryList
Issue I am building a dialog with dynamic tabs that can receive a component to be placed in the tab body. I am having a hard time creating multiple dynamic components using @ViewChildren. I have successfully done this with a
Continue readingHow to deal with nested ng-template in Angular
Issue I am making a ngx-datatabel wraper and i want to pass the column template from the parent component. Which i am doing through ng-template outlet. But its not being rendered for some reason. Here is how i am passing
Continue readingAngular – How to pass / compose components into a generic component?
Issue anyone know if it is possible to pass a component into another component? I am trying to promote code re-use in our company Dev team, but hitting some blockers . I have a Component for displaying Tabs, I want
Continue readingBest way to dynamically add elements in Angular side by side
Issue I am creating an app which has an API that returns different number of objects in an array depending on the variable that I send him. Depending on how many objects are returned I want to draw that many
Continue readingHow to bind form group to nested dynamically created components in Angular
Issue In my Angular 12 app I have this type of hierarchy: – app.component — Parent component with form (reactive) — Component that creates the dynamic components —- Dynamic component and my formBuilder form looks like this: form = this.fb.group({
Continue readinghow to fetch data from dynamically rendered component in angular
Issue I have rendered some child components (which has some forms and field) in a parent component, now I am unable to fetch data from those child component’s form’s fields Solution There are many ways to share data between components.
Continue readingRecursive Dynamic Angular Form; EmitEvent from Deeper Child to Root (Parent Component)
Issue Hi I’m newbie and I’m creating a project with a Reactive Form; based on Recursive Component that creates Dynamic Form from JSON file. The Sources This is an adaptation from Ionic based on Creating Dynamic Angular Forms with JSON
Continue readingHow to create multiple instances of a dynamic component sequentially?
Issue I have a SystemMessageService which creates instances of SystemMessageComponent using the following method createSystemMessage(message: string, vcr: ViewContainerRef, time: number = 4500, isErrorMessage: boolean = false, isWarningMessage: boolean = false, isSuccessMessage: boolean = false){ let systemMessageCmpFactory = this.componentFactoryResolver.resolveComponentFactory(SystemMessageComponent); this.hostViewContainerRef =
Continue readingHow to create multiple instances of a dynamic component sequentially?
Issue I have a SystemMessageService which creates instances of SystemMessageComponent using the following method createSystemMessage(message: string, vcr: ViewContainerRef, time: number = 4500, isErrorMessage: boolean = false, isWarningMessage: boolean = false, isSuccessMessage: boolean = false){ let systemMessageCmpFactory = this.componentFactoryResolver.resolveComponentFactory(SystemMessageComponent); this.hostViewContainerRef =
Continue readingHow to create multiple instances of a dynamic component sequentially?
Issue I have a SystemMessageService which creates instances of SystemMessageComponent using the following method createSystemMessage(message: string, vcr: ViewContainerRef, time: number = 4500, isErrorMessage: boolean = false, isWarningMessage: boolean = false, isSuccessMessage: boolean = false){ let systemMessageCmpFactory = this.componentFactoryResolver.resolveComponentFactory(SystemMessageComponent); this.hostViewContainerRef =
Continue readingAngular Dynamic Component Creation not rendering dynamic child components
Issue We’ve built a rather fancy dynamic component creation framework to build out complex forms based on json data. We have components that get created via const questionComponent = FieldComponentMap[childField.shortName]; viewContainerRef.createComponent<QuestionComponent>(questionComponent); Those components may create child components of their own,
Continue readingHow to wait for NgOnInit to complete inside Angular Dynamic Component?
Issue I am trying to set reactive form controls inside dynamic component from parent component. @ViewChild("priceSpecComp", { read: ViewContainerRef}) priceSpecComp: ViewContainerRef LoadDynamicComponent(variant, addons) { priceSpecComp.clear(); var comp = priceSpecComp.createComponent(PricingSpecDynamicComponent) comp.instance.setFormControls(variant, addons); } Inside PricingSpecDynamicComponent NgOnInit there is a http call
Continue readingHow to check if component has specific @Inputs when using createComponent
Issue In my angular app I create components dynamically using the new createComponent function. I think this feature was added in v14.1. Anyway, this is my experiment import { createComponent, …. } from ‘@angular/core’; @Directive({ selector: ‘[myInjector]’ }) export class
Continue readingAngular EventEmitter parent This equals with the EventEmitter
Issue My problem is when going back to the parent element after EventEmitter trigger my "this" is the EventEmitter itself at the parent, hence I cannot access any methods/variables which are part of the parent. Am I doing something wrong,
Continue readingHow can I render dynamic components in multidimensional array
Issue I have a multidimensional array of components I want to render to a grid: [ [ { component: class TitleComponent, data: { title: "Invoice" }, row: 1 }, { component: class AddressComponent, data: { companyName: "Comapny Name", addressLineOne: "123
Continue readingAngular 14: Programmatically created component that has NgControl as a dependency
Issue Trying to add a component to the DOM with ViewContainerRef createComponent. However, the component depends on NgControl. The end goal is to add components to a form using the FormBuilder. Can’t seem to wrap my head around dependency injection
Continue readingAngular – Dynamically load multiple instances of the same component by submitting a form to add a new instance of a component to the display
Issue Question update link. Problem I’m trying to dynamically load multiple instances of the same component, with a new component being added/loaded to the screen when a user submits a form. The idea behind this is that a user can
Continue readingAngular – Dynamically adding / removing multiple instances of a single component without having to refresh the page to update the view
Issue This is my 3rd attempt at asking this question. This question will be long since I see no way of making it short. Objective What I’m trying to do is to have a simple web-app that has a header
Continue readingAcessing Component ViewContainerRef createComponent() function from a different non related component results in error
Issue Link to updated question. I posted this question before. To briefly summarise; I’m trying to call a function that creates instances of a component using the ComponentFactoryResolver and ViewContainerRef inside of another function that is in a non related
Continue readingAngular – A function defined in one component, that generates dynamic child components can’t be called in a separate non related component
Issue Update to this in this new question. I have followed this guide which I found by finding this question but then being pointed to this question as a fix for some of the issues that occurred in the prior
Continue readingTypescript error on creating dynamic components and module
Issue Im trying to add the component and module dynamically as shown below Component: protected createNewComponent (tmpl:string) { @Component({ selector: ‘dynamic-component’, template: tmpl, providers: [{provide: CustomDynamicComponent, useExisting CustomDynamicComponent}] }) class CustomDynamicComponent implements IHaveDynamicData { @Input() public entity: any; }; //
Continue readingAccess dynamically loaded child component instance
Issue @ViewChild(ComponentType) comp!: ComponentType; ngAfterViewInit() { console.log(‘ComponentType instance’, comp); } To get hold of a child component’s instance, I know that ViewChild can be used as shown above. It works for statically added components, but if I use it on
Continue readingError connection refused while starting angular project
Issue Someday I was creating projects in Angular 4 and I want to do this again but on a newer version of Angular. What I did: 1.) Installation of Visual Studio Code. 2.) Installation of Nodejs: Node version is 10.15.1
Continue readingUnable to get the Chrome debugger to work via launch in Visual Studio Code for an Angular 8 project
Issue Upon upgrading Angular to version 8, I am now unable to run the Chrome debugger within Visual Studio Code. I have not changed my launch.json which is similar to the following: { “type”: “chrome”, “request”: “launch”, “name”: “Launch Chrome
Continue readingUsing http with ngBootstrap Typeahead for Angular 4
Issue I’d like to use ngBootstrap for Angular 4 Typeahead for autocomplete. The example they have for remote data retrieval is using Jsonp and not http. I’ve been trying to find some more info to replace Jsonp with http in
Continue readingChoosing multiple values in ng-bootstrap Typeahead
Issue I am using typeahead from Angular ng-bootstrap – https://ng-bootstrap.github.io/#/components/typeahead/examples Everything is working fine, but I want multiple values on one single text box. As that field is a form group, once one value is selected, it should can allow
Continue readingHow to highlight some options of ngb-typeahead based on a condition?
Issue https://ng-bootstrap.github.io/#/components/typeahead/examples#focus In this demo, I have to make the dropdown options with value which starts with ‘M’ and ‘N’ to be permanently highlighted with green and rest with yellow. How to achieve this? Solution Can be done my joining
Continue readingAngular 11 – Modal Method checks for value in array and returns false even when the constructor loads the array
Issue I have a form that registers a new Group of courses called ‘areas’. The form have a button that calls a modal window and allows the user to select the desired courses and add them to the form list.
Continue readinghow to translate angular datePipe's dates with moment.js?
Issue I have this version of packages: "@angular/cdk": "^11.2.13", "@ngx-translate/core": "^13.0.0", "@angular/material-moment-adapter": "^12.2.9", "moment": "^2.29.1", "@types/moment": "^2.13.0", I am using angular datePipe | date: ‘MMM d, y’ format, which is mediumDate. I want to translate it to other language. For
Continue readingReassign Variable which is coming as @Input in component
Issue I have a component which takes a boolean value as @Input. I am controlling a div using ngIf with this value(to show/hide). Now, when I pass value true or false in both cases, the UI shows the div, whereas
Continue readingWhat causes the "Cannot find name" error in this Angular 11 application?
Issue I am working on an Angular 11 application. In the service UserService I have: import { Injectable, OnDestroy } from ‘@angular/core’; import { UserModel } from ‘../path/to/UserModel’; export class UserService implements OnDestroy { public isActiveUser: boolean = false; public
Continue readingAngular 11 two way binding for a numeric field: backspace not working as expected and giving junk values whenever pressed
Issue I am working with Angular 11 and came across two way binding for quantity field which is an input field of the type number. Problem arrives when I try to use backspace for the quantity field input. It gives
Continue readingconsole.log returns api data but ERROR TypeError: Cannot read properties of undefined reading 'name'
Issue I dont understand i’ve already passed the parent data employeeNumber to user-seminar child component. Here is my child component code export class UserSeminarComponent implements OnInit { @Input() employeeNumber: number; seminar: IUserSeminar; // seminar: any; constructor(private apiService: ApiService, private spinner:
Continue readingHow to get api data in router outlet – Angular
Issue My problem is i cannot pass parent data ngOnInit route params to my child component user-seminar. So i tried google searching and arrive a solution through services. I have changed my app navigation to router-outlet and i have main
Continue readingAngular – How to fix an "Object is possibly 'null'" error from the component's template
Issue I am working on an e-commerce Angular 11 application. I have a template that has to render an error message if the quantity provided for a cart item is less than 1. The cartItem can be null (or undefined)
Continue readingAngular – How to fix an "Object is possibly 'null'" error from the component's template
Issue I am working on an e-commerce Angular 11 application. I have a template that has to render an error message if the quantity provided for a cart item is less than 1. The cartItem can be null (or undefined)
Continue readingfetching data from Service and storing in Child component – Angular 11
Issue Here’s where i use my service to get api data to child. Initially it gets the Id and other user data in console. ngOnInit(): void { this.commonService.userSetChange.subscribe( apiData => { this.getUserSeminar(apiData); this.user = apiData; console.log(this.user) }); } Then i
Continue readingmessage: The POST method is not supported for this route. Supported methods: GET, HEAD, PUT, PATCH, DELETE
Issue So I have an API route Route::group([‘prefix’ => ‘users’], function() { Route::group([‘prefix’ => ‘seminar’], function() { Route::get(‘/{employee_number}’, [UserProfileController::class, ‘getSeminar’]); Route::post(‘/{user}’, [UserProfileController::class, ‘createSeminar’]); Route::put(‘/{seminar}’, [UserProfileController::class, ‘updateSeminar’]); Route::delete (‘/{seminar}’, [UserProfileController::class, ‘deleteSeminar’]); }); }); And a controller public function createSeminar(User $user, Request
Continue readingDisplay relationship api data in html table – Angular
Issue Basically i have a relationship data in educational_awards and has a field award Im trying to display that data to my html table but it wouldn’t show. <tr *ngFor="let item of data; let i = index"> <td> {{ item.year
Continue reading