Questions tagged [angular2-directives]

Is there a way to execute a function within a directive when the form is marked as pristine? I want to apply a CSS class to a tab header when the form is pristine. <form [formGroup]="awayForm" (ngSubmit)="onSubmit()" awayConfirm [cancelClicked]="cancel ...

I am trying to use a directive twice on one page. Inside the directive, there is a button that should toggle between showing the two directives when clicked. However, I'm encountering an issue where the values are not changing even though the ng-click func ...

I have implemented a directive on an HTML input box to handle numeric values. The directive is meant to "clean" the number (removing commas, dollar signs, etc) when a user pastes a number into the textbox. Although the cleaning code works properly, the iss ...

Is there a way to make form fields required or not based on the value of other fields? The standard RequiredValidator directive doesn't seem to support this, so I've created my own directive: @Directive({ selector: '[myRequired][ngControl ...

Upon creating a model-driven form, an error is encountered: Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup directive and pass it an existing FormGroup instance (you can create one in your class). ...

Currently, I am in the process of creating filter components for a grid (Ag-Grid) and planning to use them in various locations. To make these filters accessible from different places, I am developing a wrapper for them. In particular, I am working on a fi ...

I'm a bit confused on how to properly utilize the EmbeddedViewRef's context variable in Angular 2. According to the Angular 2 changelog, the context variable replaces the setLocal and getLocal methods for setting local variables in an embedded vi ...

I am currently developing an Angular2 application where I am loading data from a service into my component as a subject. public type1Choisi: any; constructor( public formeService: FormeService, ...) { this.formeService._type1.subscribe(type1 => ...

I have successfully implemented an Angular Directive to toggle the visibility of password fields in a form. However, I am facing an issue with updating the text displayed on the button based on the state of the input field. Is there a way for me to dynami ...

Hey everyone! I've been working on creating a custom directive in Angular 8, but for some reason it's not functioning properly. Even though there are no errors shown in the browser console, I can't see any changes or output from the console.logs I've added ...

I am attempting to develop a custom structural directive using the example provided here When trying to pass a string as an input with a slight modification, I encountered an issue where the input value was returning 'undefined' when calling th ...

Recently started experimenting with the beta version of Angular 2.0 and encountered an error stating "angular is not defined" while trying to add directive: [angular.ngFor]. If you want to take a look, here is the Plunker URL: http://plnkr.co/edit/ULHddLR ...

Recently diving into NG2, I've been experimenting with adding Slide Up/Down effects to the default Bootstrap 4 Dropdown component. The Bootstrap dropdown component comes equipped with two jQuery Listeners, $(el).on('show.bs.dropdown') and $ ...

I'm currently working on creating a unique list, similar to the notification system seen on platforms like Facebook. The list is pulled in via JSON and displayed on the UI using ngFor. Each item in the list has a default CSS class called "unread", which is ...

I have a custom alert directive set up in my Angular app: import { Component } from 'angular2/core'; import { CORE_DIRECTIVES } from 'angular2/common'; import { Alert } from 'ng2-bootstrap/ng2-bootstrap'; @Component({ sele ...

I'm not trying to figure out how to access looping variables like i, first, last. Instead, my question is about how to retrieve and set variables as template variables. My current approach doesn't seem to be working... <div #lastElement="arr ...

In the process of developing an Angular 5 directive, I aim to incorporate various host views (generated from a component) into the viewContainer. However, I find myself at a crossroads as to whether I should opt for an attribute directive or a structural ...

Is there a way to apply both * to a string? Below is the code snippet I am working with: <a class="sidenav-anchor" *ngIf="!item.hasSubItems()" md-list-item md-ripple [routerLink]="[item.route]" routerLinkActive="active" [routerLinkActiveOptions]="{ex ...

Currently, I am faced with the challenge of creating a test for a directive that requires a window object to be passed into its constructor. This is the code snippet for the directive: import { Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit ...

I am attempting to incorporate a graph similar to the one shown in this Plunker example: Plunker Here is the corresponding code hosted on GitHub: GitHub However, I encountered an error: Uncaught (in promise): Unexpected directive value 'undefined ...

Currently, I am attempting to utilize a pipe for sorting in Angular 4. The issue lies with the combination of the pipe and ngFor. <div *ngFor="let item of data | paginate: { itemsPerPage: 8, currentPage: p } | orderBy : ['{{config}}'] " c ...

Angular 1 uses the link function in a directive to target DOM elements. link: function (scope, element, attr) { // do something with element[0], e.g. put generated graphics // inside the node } What is the equivalent feature in Angular 2? ...

Created a function within the component.ts file inside the constructor: constructor(private _visitService: VisitService,) { this._visitService.getchartData().subscribe(data => { this.fetchedData = data console.log("INSIDE SUBS ...

Recently, I started using angular2 and I've been attempting to create a vertically resizable div without success. I have experimented with a directive for this purpose. Below is the code for my directive: import { Directive, HostListener, ElementRef ...

In my Angular project, I have designed a main layout using flex display with specific height and overflow settings. The main content div inside this layout has its own unique styling to ensure consistent appearance for any components inserted within it. By ...

Seeking a solution to determine if an element is disabled in an Angular directive. Have attempted with host listeners, but no success yet. Directive: @HostBinding('attr.disabled') isDisabled : boolean; @HostListener("disabled") disabled() { ...

Currently, I am in the process of developing a personalized *ngIf directive that will swap out content with a placeholder during loading. After referencing the *ngIf directive (https://github.com/angular/angular/blob/master/packages/common/src/directives/n ...

I am attempting to create a sleek horizontal scroll bar within one of my div elements, similar to the example shown here: https://i.stack.imgur.com/ziWhi.png My project is based on the angular2 CLI. Progress so far: I came across this package angular2-s ...

I am currently in the process of upgrading my Angular 2 RC 1 app to Angular 2 RC 4, and part of this update involves migrating my existing forms to Angular 2 RC 4 New Forms. Could someone provide guidance on how to successfully update my existing forms to ...

When I click a button on my client application, it sends a request to the server I created using Express. The request handler in the server simply logs 'Delete from server' every time the button is clicked. I am encountering these errors when clicking on ...

I'm currently grappling with a scenario where I need to utilize tables to achieve the following: Array of objects [ { name:'Jhon', email:'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="345e5c5b5a745359555d ...