Developing a custom directive in Angular 2 that implements the OnInit

Question

Developing a custom directive in Angular 2 that implements the OnInit

Just delving into Angular 2 and encountering a minor hiccup.

Here's a quick custom directive designed to turn text green. However, there seems to be an issue with accessing the "defaultColor" string within ngOnInit - it keeps returning as "undefined" in the console log.

Any insights on what might be causing this?

Cheers!

import {Directive, ElementRef, OnInit} from 'angular2/core';

@Directive({
    selector: '[myHighlight]'
})

export class HighlightDirective implements OnInit{
    private elRef:ElementRef;
    private defaultColor: 'green';

    constructor(elRef:ElementRef){
        this.elRef = elRef;
    }

    ngOnInit():any {
        this.elRef.nativeElement.style.color = this.defaultColor;
        console.log(this.defaultColor)
    }

}

typescript angular angular2-directives

Answer 1

Answer №1

The syntax in this case is incorrect.

private defaultColor:string = 'green';

In this scenario, the assignment should use = instead of :. The usage of : is to specify a type for the field.

Answer 2

The syntax in this case is incorrect.

private defaultColor:string = 'green';

In this scenario, the assignment should use = instead of :. The usage of : is to specify a type for the field.

Answer 3

Answer №2

Check out the Live Demo

main.ts

import {Component,bind} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {FORM_DIRECTIVES} from 'angular2/form';
import {selectedColorDirective} from 'src/directive';
import {Directive, ElementRef, Renderer, Input,ViewChild,AfterViewInit} from 'angular2/core';
@Component({
  selector: 'my-app',
    template: `
          <div mySelectedColor> (div) I'm {{color}} color </div>
    `,
    directives: [selectedColorDirective]
})

export class AppComponent implements AfterViewInit{

 }

bootstrap(AppComponent, []);

directive.ts

import {Directive, ElementRef, Renderer, Input} from 'angular2/core';

@Directive({
    selector:"[mySelectedColor]", 
})

  export class selectedColorDirective { 

    private defaultColor: 'green';
     constructor(el: ElementRef, renderer: Renderer) {
      this.el=el;
        //this.el.nativeElement.style.backgroundColor = this.defaultColor; 
        this.el.nativeElement.style.color = this.defaultColor; 
     } 

        ngOnInit():any {
           this.elRef.nativeElement.style.color = this.defaultColor;
            console.log(this.defaultColor)
        }
    }

Answer 4

Check out the Live Demo

main.ts

import {Component,bind} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {FORM_DIRECTIVES} from 'angular2/form';
import {selectedColorDirective} from 'src/directive';
import {Directive, ElementRef, Renderer, Input,ViewChild,AfterViewInit} from 'angular2/core';
@Component({
  selector: 'my-app',
    template: `
          <div mySelectedColor> (div) I'm {{color}} color </div>
    `,
    directives: [selectedColorDirective]
})

export class AppComponent implements AfterViewInit{

 }

bootstrap(AppComponent, []);

directive.ts

import {Directive, ElementRef, Renderer, Input} from 'angular2/core';

@Directive({
    selector:"[mySelectedColor]", 
})

  export class selectedColorDirective { 

    private defaultColor: 'green';
     constructor(el: ElementRef, renderer: Renderer) {
      this.el=el;
        //this.el.nativeElement.style.backgroundColor = this.defaultColor; 
        this.el.nativeElement.style.color = this.defaultColor; 
     } 

        ngOnInit():any {
           this.elRef.nativeElement.style.color = this.defaultColor;
            console.log(this.defaultColor)
        }
    }

Developing a custom directive in Angular 2 that implements the OnInit

Answer №1

Answer №2

Similar questions

Using RXJS to filter data within nested properties using the pipe operator

Saving the contents of a book in an Ionic mobile application

Angular2 Pipe - Currency code

Can errors be captured within a subscription or is it a futile endeavor?

After successfully logging in with the angular2-token package, the Rails 4 API is responding with a 401 unauthorized error

Mastering Typescript lookup types - effectively limit the properties included in a merge operation with the Partial type

An issue arose when attempting to forward the request with a self-signed certificate in the chain for the Angular CLI API

Angular/HTML - Full JSON data can be shown completely, but attempting to display only a single attribute is

Parsing JSON results in the return of two objects

Is it possible to assign default values to optional properties in JavaScript?

Generating an instance of an enum using a string in Typescript

Is it possible for Angular 5 Service Worker to retrieve assets in the background?

Angular 2 throws a typescript error with code TS2339 stating that the property 'x' is not found on the type 'Y'

Is there intellisense support for Angular 2 templates in Visual Studio?

A colleague's dependency is taking precedence over an NX Library

A helpful guide on retrieving user login details before launching an application by accessing JWT tokens stored in Cookies

Is there a way to toggle glyphicons in Angular 2 while also triggering their functions? Maybe using *ngIf?

When an asyncIterator is implemented in a unit test, it fails to resolve with any values

Is there a way I can ensure that function waits for another function to finish executing?

Tips for resolving these dependency issues