Questions tagged [angular2-directives]

1

votes
1

answer
4.3k

Views

How to fix Property binding ng-forOf not used by any directive on an embedded template? [duplicate]

This question already has an answer here: Can't bind to 'ng-forOf' since it isn't a known native property 9 answers I'm trying to set-up a simple ng-for to loop over a list of project in angular but got stuck with it. I already tried the solution in Angular2 exception: Can't bind to 'ngFor' since i...
Édouard Lopez
1

votes
0

answer
62

Views

AngularJS directive for Progress Flow

looking for some advice on if there are any existing AngularJS directives for a progress flow like this: The closest things I've come across are progress bars, which are mostly shown for things loading or updating. I want to code something that shows Stages and the progress to completion. Any ideas...
Dave
1

votes
0

answer
192

Views

How to create Angular 2 multi select drop-down list with grouping?

Hi I am working on AngularJS 2. I am newbie to AngularJS 2. I am trying to create multi select drop-down list with checkbox's. I have downloaded npm install angular2-multiselect-dropdown. Multi select drop-down list is working fine. Below is my html template. I want to edit this drop-down list such...
Giridhar Joshi
1

votes
0

answer
123

Views

How to add request options in Angular 2?

I am trying to implement Auto search in Angular 2. I am trying to get data from API to populate in suggestion list. My API accepts headers with token. Below is a sample url: curl -X GET --header 'Accept: application/json' --header 'Authorization: USERNAME PASSWORD' 'https://apsapi.azurewebsites.net...
Niranjan
1

votes
1

answer
230

Views

How to display formatted value as user types, but send the raw value to the Angular 4 formControl for validation and the formControl value?

I am new to Angular2/4. I have an input field with formControlName = 'Price', and I need the input value to be displayed in the correct currency format as the user types. When user types '100000', I need it to be displayed as 'Rp100,000' but the raw value should be sent as it is to the FormControl v...
FN.Frey
1

votes
2

answer
457

Views

Angular 2 dropdown list not loading since the http response is slow

I was trying to load dropdown list from http response using angular2 service. Here is my service method : categories: any; getCategories() { let subscription = this.httpclient .get(this.server_url) .subscribe((data) => { this.categories = data; console.log(this.categories); }); } Component TS cate...
debarun.datta
1

votes
0

answer
428

Views

Angular 2 Change URL & content based on onChange value

So, I have a component that implements OnInitto refresh data based on API calls. The component is RoomComponent. In that component, I pass events that is an array of object. Then in room.component.html I render the dropdown consist of event.url. I want to change the URL & content when dropdown value...
SNahar
1

votes
1

answer
589

Views

Read/get element attribute from within custom directive in Angular 2+

I'm building a custom directive where I want to read one of the attributes (formControlName) of the native element, and then conditionally add one or more attributes to the element. However, when I console.log the native element's attribute, I get: undefined Here's what I tried: @Directive({ select...
BBaysinger
1

votes
0

answer
332

Views

Directive exportAs doesn't work

I faced with a problem when try to use exportAs property od Directive decorator: app.component.ts import {Component} from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent {} app.component.html {{i...
Mike Mameko
1

votes
0

answer
22

Views

How to map two models using ID?

Models.py (Main form) class Product(models.Model): image = models.ImageField(upload_to = 'images/',blank=True,null=True) pro_name = models.CharField(max_length=25) description = models.CharField(max_length=150) category = models.ForeignKey(Category,on_delete=models.CASCADE) sales = models.CharField...
1

votes
0

answer
216

Views

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'

I have kendo date picker and a div, which showing 'Required' message in angular4 reactive form. This field is required The reactive form is loading the controls dynamically. The 'appDateFormatOnly' is a directive used for date format validation. I have a method 'isValid()', which is returning one b...
Velkumar
1

votes
1

answer
1k

Views

Angular 5 data table pagination not work when getting data from service

installed this one https://www.npmjs.com/package/angular-datatables-5 in demo they are used data from constant then it is working fine , this.filmResource.query(params).then(films => this.films = films); here films is a constant but when i call service for getting data , table populated but paginat...
codelover
1

votes
1

answer
134

Views

Reference error: “__decorate is not defined” when passing input to an angular directive

I am currently trying to pass an object to my created directive below and the element property remains undefined even though the alias is matching the @input decorator. The onClick method is being hit correctly as well. import { Directive, Input, HostListener } from '@angular/core'; @Directive({ sel...
Paul Ivanov
1

votes
0

answer
74

Views

How to detect DOM changes using a class Selector Directive

Create a directive that applied certain functionality to all the elements that had the 'active' class. However, if at run time it added the 'active' class to an existing DOM element, the functionality of the directive was not applied to it. import { Directive, Renderer2, ElementRef, OnInit, HostList...
1

votes
0

answer
549

Views

how to use reference variable in ng-container?

component.html Select {{user.customer}} {{user.id}} once i select the dropdown option is generate email id is stored in businesstype.and ng container i am using same forloop is getting id.but how to stored in reference variable.
hari prasanth
1

votes
1

answer
106

Views

Populate city drop down according to the condition in angular5

I want to display a cities name in the select box according to the country in the previous select box.I displayed the countries in the first select box but on the click event i can not display the cities,i dont know how to access the nested json into html.Please help. This is my json file [ { 'co...
manju t
1

votes
1

answer
241

Views

why child component not showing console.log Outputs?

My child component showing its html Output fine but its showing console.log output in console and console.log working fine everywhere else in the project .And showing no error about this component in console import { Component, OnInit, Input } from '@angular/core'; console.log('Mian is here') @Compo...
smith felk
1

votes
0

answer
113

Views

Angular 2 jest input delegate test

I have a problem with the unit-testing delegate component, which should block special keys and allow the input of data matching the regular expression. The directive component code is: import {Directive, ElementRef, HostListener, Input} from '@angular/core'; @Directive({ selector: '[w2NumberLimit]',...
1

votes
2

answer
183

Views

directive don't exist in current component

I'm new to angular 2, I saw some videos and implement this but I am facing some problems. I have created a new component navbar and imported it in app.component.ts file. While adding meta data @Component directive not found error occurred. Error: Argument of type '{ selector: string; template: strin...
1

votes
0

answer
107

Views

How to use for loop in NG2 smart table angular2?

I don't know how to use loop in NG2 Smart table. Here i have mentioned Backend output image. from that i want to print category from details list. And also i have mentioned my component.ts here. component.ts settings = { mode: 'external', hideSubHeader: true, actions: false, edit: { editButtonConten...
1

votes
0

answer
258

Views

How to open PDF in new window using ng2-pdf-viewer in angular2?

I want to open pdf document in new window using ng2-pdf-viewer in angular2. I have shown pdf url on hyperlink,when user clicks on it,this should open and show the pdf in new window. Also I want to make sure that pdf is not downloadable. Please suggest the solution.
Prajakta
1

votes
0

answer
245

Views

How to test an Angular directive using NgZone and Google places?

I don't find how to test my angular directive... google-places.directive.ts import { Directive, ElementRef, EventEmitter, NgZone, Output } from '@angular/core'; import {} from '@types/googlemaps'; @Directive({ selector: '[appGooglePlace]' }) export class AppGooglePlaceDirective { @Output() placeChan...
WizardPC
1

votes
1

answer
364

Views

Angular: how to make NgControl react to valueChanges only of the host <input>

I am using a directive on an -element and get a reference to its controls like this: @ContentChild(NgControl) private readonly _inputNgControl: NgControl; But when I listen to model-changes like so: ngAfterContentInit(): void { this._inputNgControl.control.valueChanges .distinctUntilChanged() .subsc...
Phil
1

votes
0

answer
42

Views

Angular5 - active class not added on page reload using routerlinkactive directive

app.routing.ts { path:'dashboard/:name', component:DashboardComponent} Dashboard For navigation, active class added properly for the route '/dashboard/cps', but when i reload the page active class not added.This issue comes only for the dynamic values. Can anyone please help me on this issue? Thanks...
Nithya
1

votes
2

answer
265

Views

Displaying backend database data in angular2 table

Hi I'm having an issue while trying to display the data received from my API call into an HTML table using angular2. I am trying to display the name of each group I receive from backend in a table. From console log, I can see that my data is in the following format: { 'list':[ {'group_uuid':'2675005...
Aparna Krishna
1

votes
0

answer
23

Views

Loading a select list in angular 2 based on data entered by user in form

So I have a form in which I am getting some user input. Based on this input I am fetching data from server. I need to display this data in a drop down select list. However my select list is always empty even though I can see I am receiving data from the server. I have attached my html code: Enter...
AgrajaJ
1

votes
0

answer
449

Views

Angular 4- Drag textarea and drop anywhere on canvas

Currently implementing one application, in which I want to add text to text area. On completion of it, I need to drag text area any where on the screen. Currently my screen is covered with canvas. Means I am adding text area dynamically on button click. Once done it should be draggable over the scre...
1

votes
0

answer
38

Views

Calling component's function from a call back function angular

I am using google maps with my angular application in following way. const mapProp = { center: new google.maps.LatLng(24.828844, 67.034527), zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP }; this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp); I am adding markers to my map i...
Shoaib Iqbal
1

votes
0

answer
25

Views

Writing common logic to get table sort and pagination preferences from API and display data accordingly angular 4

I am trying to write a custom logic on material design table. Where I want to save the preferences like matSortActive, matSortDirection and when next time user comes to the same component he is able to view the table as per his saved preferences. For that I have saved the preferences in local stor...
PKSA
1

votes
0

answer
106

Views

Dynamically create Angular component from string

My goal is to create an automatic way of transforming any given string part of an HTML element into a custom component. For example, given: Hello my name is #max I would like to create something like: Hello my name is which will then be rendered based on some-custom-component's template My main i...
1

votes
0

answer
94

Views

Multiple instances of angular 2 directive on the same page

I have a click-outside directive on a component which is created multiple times on the page. The component has a drop down I created which on click-outside of it closes the drop down. The problem is that when I have ~100 components with this drop down the click-outside directive gets called ~100 tim...
Shakedav
1

votes
1

answer
51

Views

appendComponentToBody is not working in angular 2

appendComponentToBody is not working in my code..I can not findout where I did mistake.Please help me how to resolve this issue. See my code:https://stackblitz.com/edit/angular-axhgid?file=src%2Fapp%2Fdialog%2Fdialog.component.ts dialog.component.ts constructor(private domService: ModalService) { }...
Kanaka k
1

votes
1

answer
214

Views

Append modal popup on body by angular4

I am trying to show modal popup on body.I do not know how to do it? I took script from the following links: script for append content on body: Guys please If you can not understand please ask me i will explain clearly..This is not duplicate.Please check and answer me.
Apple Orange
1

votes
0

answer
231

Views

Is there a way to customize the color of single cells in ngx-datatable angular2?

Is there a way to customize the color of single cells in ngx-datatable? I see that getCellClass is only helping me customize the color for the entire row. Pasting what I currently have here below - TS file - getCellClass = ({ row, column, value }): any => { return { 'cell-color': this.findModifi...
srao
1

votes
1

answer
185

Views

Angular4 group by filter not working with pipe: ngx-pipes

I really trying to filter data that I need, filter products by price and by gender. I used ngx-pipe, build pipe for sort the data. HTML: {{g.DisplayText}} {{k.DisplayText | groupBy: 'Value'}} store: {{ store.StoreName }} Product Price: {{ product.Price | currency}} Product Title: {{ product.Product...
Ella
1

votes
0

answer
104

Views

Access let- variable on ng-template in custom directive

I'd like to be able to access the let-* variables I'm defining on an ng-template using my own custom directive which is on the ng-template itself. {{someInput}} What I try to achieve is to pass the let-column value into my custom directive as an input. Is that possible at all or am I only able to us...
Christian Wörz
1

votes
1

answer
286

Views

mouseenter / mouseleave with @HostListener

The flickering is killing me and after reading all the jQuery related threads and mdn I still cannot figure it out. So I have this @Directive for showing a tooltip and this is how I bind it to the elements: @HostListener('mouseenter', ['$event']) onEnter( e: MouseEvent ) { this.showTooltip(e); } @Ho...
pop
1

votes
0

answer
48

Views

Build an multi step form with ngb-tabset and selectors

I have a big form with steps, i was implementing all inputs in the same html file, then i tried to build a forms controls with the steps. My html file looks like this before stuff.. stuff.. And my formGroup was in this way initResourceForm() { this.resourceForm = this.formBuilder.group({ id: [0],...
Darleison Rodrigues
1

votes
2

answer
71

Views

Angular 7 reactive forms binding intercepting

I want to format data (provided by user )to my own format or change them on the fly (eg. set 0 when user put a value lower than 0 or something like that). I mostly use a reactive forms solution to connect view with code behind. What I've done it by intercepting my binding between the variable of For...
Jaume
1

votes
1

answer
34

Views

Iterate Array inside of Array and bind data in html using string interpolation in angular

I want to iterate through my json data Array of Array and bind the data with the help of string interpolation in my html file. My JSON data is below export interface Patient { _id: string; name: string; gender: string; age: number; } export interface Range { unit: string; high?: number; low?: number...
MRIGANK TAXAK

View additional questions