AngularJS 4 Input Text box Example:
Input text is one of the mostly used component in any form. You can not find a single dynamic website without input text in web applications. Today we are going to see an example on how to use input text in angularjs 4.
Table of Contents
Prerequisite:
1. NodeJS and Angular-CLI must be installed, if not refer the below links for quick guidance.
2. Ensure the first app is running without any issue in your system, if not refer the below link for quick help on this.
AngularJS 4: Important files to be known
1. AppModule TS File [It is something similar to main method in other langulages, just to make better understanding comparing here this way].
2. AppComponent TS File [File which have templates, selector components etc.]
3. AppComponent HTML File [ Template file]
4. Main Index file [Need to give the selector and add angularjs 4 code – outside the project app folder]
5. AppComponent CSS File [Here no css styles used, so you can not find this file in this post]
1. AppModule [app.module.ts]:
Where the app.component.ts is bootstrapped to execute. It is something like main method where the execution starts in other programming languages. BrowserModule must be imported to render the output in browsers. Provider tag is empty here if you use any services then you can include that in providers.
[html]
import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { FormsModule } from ‘@angular/forms’;
import { HttpModule } from ‘@angular/http’;
import { AppComponent } from ‘./app.component’;
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
[/html]
2. AppComponent TS [app.component.ts]:
app.component.html file is included with templateUrl, you can directly write the code with template: `<h1> Hello {{input_name}}</h1>` here. Recommended to keep the file separate.
[html]
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
}
[/html]
3. AppComponent HTML [app.component.html]: [where input text is placed]
[(ngModel)] input_name is model binding variable here. Remember you can not use hyphen [-] in ngModel name in angularJS 4 like input-name.
[html]
<h2>Hello {{ input_name || ‘world’}}</h2>
<input type=”text” [(ngModel)] = “input_name” />
[/html]
4. Main Index File: [Where app selector “app-root” tag included]
[html]
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Input Text Example in AngularJS 4</title>
<base href=”/”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”icon” type=”image/x-icon” href=”favicon.ico”>
</head>
<body>
<app-root>Loading…</app-root>
</body>
</html>
[/html]
Output:
