Skip to content
Readerstacks logo Readerstacks
  • Home
  • Softwares
  • Angular
  • Php
  • Laravel
  • Flutter
Readerstacks logo
Readerstacks
ng init angular 2

ng init alternative in angular 2

Aman Jain, October 6, 2021October 7, 2021

In angular js we have ng-init directive to process the expression or initialize the any variable in html view but in angular 2 we do not have any option to initialize variable or expression in html template, so in this tutorial we will learn how to implement ng init like functionality in angular 2 applications.
For this implementation you should knowledge of directives in angular and input output. In this article we will create a directive for ngInit and then we can use it anywhere in our app. Let’s begin with simple steps

Step 1 : Create a new custom diretive

You can simply create a custom directive using angular cli

ng generate directive myInit

this will create two files src/app/my-init.directive.ts and src/app/my-init.directive.spec.ts. It will also import the new directive to our module app.module.ts.

You can also create the file manually and add it to the modules and add simple code

import { Directive } from '@angular/core';

@Directive({
  selector: '[appMyInit]'
})
export class MyInitDirective {

  constructor() { }

}

Step 2: Import the new directive to module

If you have created the file manually then its required to add it into our module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { MyInitDirective } from './my-init.directive';

@NgModule({
  declarations: [
    AppComponent,
    MyInitDirective
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3 : Add logic into MyInitDirective

import { Directive, Output, EventEmitter } from '@angular/core';
@Directive({
  selector: '[appMyInit]'
})
export class MyInitDirective {

  @Output()
  appMyInit: EventEmitter<any> = new EventEmitter();

  constructor(){
   
  }
  ngOnInit() {
      console.log("ngInit")
      this.appMyInit.emit();
  }

}

Here, we have added @Output decorator, so when we add this directive to any element then it will call the ngOnInit and then we have emitted our appMyInit.

Step 4: Using new directive into html element

Now, we are going to use our newly created directive to any element.

<h1>Angular 2 custom ngInit directive  -ReaderStacks.com </h1>

 Original Title : {{title}}

<div (appMyInit)="title2='new custom directive'">
   Updated title in html view : {{title2}}

</div>
 

and component

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'rest-api';
}

Output:

Screenshot 2021 10 06 at 4.49.29 PM
ng init in angular 2

Share this:

  • Facebook
  • X

Related

Javascript Angular

Post navigation

Previous post
Next post

Related Posts

Javascript How to create global variable in angular ?

How to create global variables in angular ?

October 3, 2022November 8, 2023

In this article, we will learn about the create global variables in Angular and how to use them. We will also see how to use them across the application by importing the file. There are different ways to create global variables in angular. One way is to use the global…

Share this:

  • Facebook
  • X
Read More
Javascript How to copy object without reference in angular

How to copy object without reference in angular ?

April 13, 2022April 14, 2022

In this tutorial we will learn to copy object without reference in angular. Objects and array are work on reference by address methodology means Objects and array keeps the address means if you change anything in the object or array from anywhere then it will change the value in original…

Share this:

  • Facebook
  • X
Read More
Javascript Angular Click Event on Input Example

Angular Click Event on Input Example

September 22, 2022November 8, 2023

Angular Click Event on Input is an Angular event binding it triggers when user click or tap any DOM element and it fires a event of (click). Input events in angular can be handled using input and output decorators and in this tutorial we will learn Angular Click Event on…

Share this:

  • Facebook
  • X
Read More

Leave a ReplyCancel reply

Aman Jain
Aman Jain

With years of hands-on experience in the realm of web and mobile development, they have honed their skills in various technologies, including Laravel, PHP CodeIgniter, mobile app development, web app development, Flutter, React, JavaScript, Angular, Devops and so much more. Their proficiency extends to building robust REST APIs, AWS Code scaling, and optimization, ensuring that your applications run seamlessly on the cloud.

Categories

  • Angular
  • CSS
  • Dart
  • Devops
  • Flutter
  • HTML
  • Javascript
  • jQuery
  • Laravel
  • Laravel 10
  • Laravel 9
  • Mysql
  • Php
  • Softwares
  • Ubuntu
  • Uncategorized

Archives

  • December 2023
  • November 2023
  • October 2023
  • July 2023
  • March 2023
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021

Recent Posts

  • How to Call Controller Method from Another Controller in Laravel ?
  • How to Get Domain Name in Laravel ?
  • How to Append Query String to Route in Laravel ?
  • How to Append URL Query Params to Pagination Laravel ?
  • How to Get Today Records in Laravel ?
©2023 Readerstacks | Design and Developed by Readerstacks
Go to mobile version