AngularJS Examples

Last modified on: December 1, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">&nbsp;</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="e3988ec7-3f81-475e-9f38-f09c479ae386" data-message-model-slug="gpt-4o">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>Angular 2 JS Examples: Practical Implementation Guide</h3>
<h4>Overview</h4>
<p>Angular 2 is a robust JavaScript framework for building modern web applications with features like components, dependency injection, and dynamic data binding. Below are examples demonstrating key concepts in Angular 2 JS to help you understand its capabilities.</p>
<hr />
<h3>1. <strong>Setting Up Angular 2</strong></h3>
<p><strong>Steps to Install Angular 2</strong>:</p>
<ol>
<li>Install Node.js and npm.</li>
<li>Set up a new Angular project using Angular CLI:
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">bash</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>npm install -g @angular/cli
ng new my-angular-app
cd my-angular-app
ng serve
</code></pre>
</div>
</div>
</div>
</div>
</li>
<li>Access the app at <code>http://localhost:4200</code>.</li>
</ol>
<hr />
<h3>2. <strong>Hello World Example</strong></h3>
<p><strong>app.component.ts</strong></p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">typescript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `&lt;h1&gt;{{ title }}&lt;/h1&gt;`,
  styles: ['h1 { color: blue; }']
})
export class AppComponent {
  title = 'Hello, Angular 2!';
}
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>Output</strong>:<br />Displays a blue "Hello, Angular 2!" message.</p>
<hr />
<h3>3. <strong>Two-Way Data Binding Example</strong></h3>
<p><strong>app.component.ts</strong></p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">typescript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    &lt;input [(ngModel)]="name" placeholder="Enter your name"&gt;
    &lt;p&gt;Hello, {{ name }}!&lt;/p&gt;
  `
})
export class AppComponent {
  name = '';
}
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>Output</strong>:</p>
<ul>
<li>Dynamically updates the paragraph as the user types in the input field.</li>
</ul>
<hr />
<h3>4. <strong>Simple Component Example</strong></h3>
<p><strong>parent.component.ts</strong></p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">typescript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    &lt;h2&gt;Parent Component&lt;/h2&gt;
    &lt;app-child [childMessage]="messageToChild"&gt;&lt;/app-child&gt;
  `
})
export class ParentComponent {
  messageToChild = 'Message from Parent';
}
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>child.component.ts</strong></p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">typescript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `&lt;p&gt;{{ childMessage }}&lt;/p&gt;`
})
export class ChildComponent {
  @Input() childMessage: string;
}
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>Output</strong>:</p>
<ul>
<li>Parent sends a message to the child component, which displays it.</li>
</ul>
<hr />
<h3>5. <strong>Event Binding Example</strong></h3>
<p><strong>app.component.ts</strong></p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">typescript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    &lt;button (click)="onClick()"&gt;Click Me&lt;/button&gt;
    &lt;p&gt;{{ message }}&lt;/p&gt;
  `
})
export class AppComponent {
  message = '';

onClick() {
    this.message = 'Button Clicked!';
  }
}
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>Output</strong>:<br />Displays "Button Clicked!" when the button is clicked.</p>
<hr />
<h3>6. <strong>Conditional Rendering Example</strong></h3>
<p><strong>app.component.ts</strong></p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">typescript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    &lt;button (click)="toggle()"&gt;Toggle Message&lt;/button&gt;
    &lt;p *ngIf="isVisible"&gt;Hello, this is a conditional message!&lt;/p&gt;
  `
})
export class AppComponent {
  isVisible = false;

toggle() {
    this.isVisible = !this.isVisible;
  }
}
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>Output</strong>:<br />Shows or hides the paragraph based on the button click.</p>
<hr />
<h3>7. *<em>Looping Example with ngFor</em></h3>
<p><strong>app.component.ts</strong></p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">typescript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    &lt;ul&gt;
      &lt;li *ngFor="let item of items"&gt;{{ item }}&lt;/li&gt;
    &lt;/ul&gt;
  `
})
export class AppComponent {
  items = ['Item 1', 'Item 2', 'Item 3'];
}
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>Output</strong>:<br />Displays a list of items dynamically.</p>
<hr />
<h3>8. <strong>HTTP Request Example</strong></h3>
<p><strong>app.component.ts</strong></p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">typescript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  template: `
    &lt;ul&gt;
      &lt;li *ngFor="let user of users"&gt;{{ user.name }}&lt;/li&gt;
    &lt;/ul&gt;
  `
})
export class AppComponent implements OnInit {
  users: any[] = [];

constructor(private http: HttpClient) {}

ngOnInit() {
    this.http.get&lt;any[]&gt;('https://jsonplaceholder.typicode.com/users')
      .subscribe(data =&gt; this.users = data);
  }
}
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>Output</strong>:<br />Fetches and displays a list of users from a public API.</p>
<hr />
<h3>9. <strong>Routing Example</strong></h3>
<p><strong>app-routing.module.ts</strong></p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">typescript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>home.component.html</strong></p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;h1&gt;Home Page&lt;/h1&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>about.component.html</strong></p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;h1&gt;About Page&lt;/h1&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>Output</strong>:</p>
<ul>
<li>Navigates between "Home" and "About" pages using Angular routing.</li>
</ul>
<hr />
<h3>Best Practices</h3>
<ol>
<li><strong>Use Modules</strong>: Structure your application with feature modules.</li>
<li><strong>Lazy Loading</strong>: Load modules or components only when required.</li>
<li><strong>Use Observables</strong>: Manage asynchronous data streams effectively.</li>
<li><strong>Follow Angular Style Guide</strong>: Adhere to Angular's official coding standards.</li>
</ol>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More