# 1a -  Brief Introduction To Angular

{% hint style="info" %}
The finished code for the next three parts can be found here <https://github.com/duncanhunter/workshop-enterprise-angular-applications-with-ngrx-and-nx-cli-only>

```
git clone "https://github.com/duncanhunter/workshop-enterprise-angular-applications-with-ngrx-and-nx-cli-only"
cd workshop-enterprise-angular-applications-with-ngrx-and-nx-cli-only
npm install
```

{% endhint %}

## 1. Create a new Angular CLI Project

* Make a new workshop folder and generate a new CLI app

```
mkdir workshop
```

```
cd workshop
```

```
ng new angular-cli-app --routing
```

Change directory into the new app's directory and open it with VS Code

```
cd angular-cli-app
```

```
code .
```

## 2. Run the app

* Run the below command 's' is short for serve.

```
ng s
```

Look at output.

![Bundled javascript files added to index.html dynamically](/files/-LETqbRMR25KLfmGW0PV)

## 3.  Review the structure and key files

* package.json
* index.html
* main.ts
* app.module.ts
* app.component.ts
* app-routing.module.ts

## 4. Add a Home page component

* Add home page component

```
ng generate component home
```

* Add home component selector to the AppComponent and delete all default HTML except the router outlet.

{% code title="src/app/app.component.html" %}

```markup
<h1>The App</h1>

<app-home></app-home>
<router-outlet></router-outlet>
```

{% endcode %}

## 5. Add a route

{% code title="src/app/spp-routing.module.ts" %}

```typescript
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';

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

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { } 
```

{% endcode %}

## 6. Event and data binding &#x20;

* Add event and data binding to Home component with a new title property

{% code title="src/app/home/home.component.html" %}

```markup
{{title}}

<input type="text" #input [value]="title" (keyup)="updateTitle(input.value)">

```

{% endcode %}

* Add a function to the Home component.

{% code title="src/app/home/home.component.ts" %}

```typescript
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  title: string;
  constructor() {}

  ngOnInit() {}

  updateTitle(value) {
    // debugger;
    console.log(`updateTitle: ${value}`);
    this.title = value;
  }
}

```

{% endcode %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://duncanhunter.gitbook.io/enterprise-angular-applications-with-ngrx-and-nx/introduction/1a-brief-introduction-to-angular.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.