angular-directive

I do not have only one menu bar on my app that I need to be painted when the user navigates, I have another components too that needs to be painted as well. Can I achieve this just using routerLinkActive ? menu.html <menu> <a routerLink="page1" routerLinkActive="active"> option1 </a> <a routerLink="page2" routerLinkActive="active"> option2 </a> </menu> This menu works great. But what I'm asking is how can I take advantage of routerLinkActive property placed in other HTML Tag. like: main.html <main> <span class="title" routerLinkActive="active">My sub child part</span> </main> You could bind

i'm trying to build a structural directive that will change the parent DOM structure either invoked by using its selector (static) or by calling its public method(dynamic). Using the directive selector in a html template works fine without any issues. I'm trying to figure out if we an achieve the same without using it in template and by calling the directive method. my-directive.ts @Directive({ selector: '[sampleDirective]' }) export class SampleDirective { ... constructor(..) { this.customDirective(); } } customDirective() { console.log('Inside customDirective()'); } my-component.ts import {

I'm fairly new to Angular. I have a form where the user need to assign port numbers to 9 different port input fields (context: it's a form for a server environment configuration). The validation requirement is that no port number can be assigned twice, so each of the 9 port numbers needs to be unique. For that, I have a custom validation directive called "srb-unique-port", which I assign to my input fields. Directive: (function () { 'use strict'; angular .module('account') .directive('srbUniquePort', [srbUniquePort]); function srbUniquePort() { return { restrict: 'A', require: 'ngModel', scope

I am trying to validate a typical new password and confirm password match using an Angular Directive . The error message is not shown even though the directive correctly catches a mis-match: Template Form <form> <md-input-container class="signup-full-width"> <input mdInput autocomplete="off" type="password" name="password" #currentPasswd="ngModel" placeholder="Current password" [(ngModel)]="currentPassword" required> <md-error *ngIf="currentPasswd.errors && (currentPasswd.dirty || currentPasswd.touched)" [ngStyle]="{'color': 'red'}"> <div [hidden]="!currentPasswd.errors.required">Required</div

Here is the code that I have <parent my-directive [toHide]="childRef"> <child bottom right #childRef> <button>Some text </button> </child > </parent > Here I have my-directive on the parent element and I want to access the child and apply some style to it. So in my directive, I have the following. export class MyDirective { @Input("toHide") localRef; constructor(public element:ElementRef,public renderer:Renderer) { console.log('Hello MyDirective Directive'); } ngAfterViewInit() { console.log("All Transtition set"); console.log(this.localRef); this.renderer.setElementStyle(this.localRef,

I currently have the following line in my HTML: <p> this is my first line </p> Using a wrapper directive I want to add a second paragraph and wrap it in a div so it will look like this: <p wrapper> this is my first line </p> And then the directive will add the wrapper and second line to make the final HTML look like this: <div> <p> this is my first line </p> <p> this is my second </p> </div> From what I understand from angular.io I will need to create a structural directive and use a TemplateRef and a ViewContainerRef, but I can't find an example on how to use them to wrap an existing part of

I have looked at the questions regarding this error, and have not found a solution. I have a highlight directive, and I take an input index . This directive works when I declare it in the module I'm using it in. But I want to use it in several modules, So I removed the declaration, and put it inside of my root module that imports the errors. That is when I get the error: Error: Template parse errors: Can't bind to 'index' since it isn't a known property of 'div'. (" <div class="read row" appListHighlight [ERROR ->][index]="index" > <div class="col"></div> "): ng:///NetworkModule/DnsComponent