Angular Tutorial #4: Diving into Your First Angular App: Code Exploration

In the previous lecture, we created a basic Angular app. Now, let’s get our hands dirty and modify some code!

Choosing Your Code Editor

To write and edit Angular code, you’ll need an IDE (Integrated Development Environment) or a code editor. Here are some options:

• WebStorm (Paid): A powerful IDE with excellent Angular development features.
• Visual Studio Code (Free): A free and versatile IDE from Microsoft, perfect for Angular development.

Opening Your Project

1. Install and launch your chosen editor (Visual Studio Code is recommended for this course).
2. Open a new folder (File > Open Folder) and navigate to your Angular project directory (e.g., my-first-app).
3. Select the project folder and open it in your editor.

Understanding the Project Structure

Your editor will display all the files and folders created by the Angular CLI. It might seem overwhelming, but most files handle configuration and don’t require immediate modification. Here’s a breakdown of some key folders:

• package.json: Lists project dependencies, including Angular and third-party packages.
• src: Contains your application’s source code.
  • e2e: For end-to-end testing (not covered now).
  • node_modules: Installed dependencies from package.json.
  • app: The heart of your application, containing component files.

Modifying the app.component.html File

This file defines your app’s initial HTML structure. Let’s experiment with changes and observe the results:

1. Open the app.component.html file.
2. Modify the text: Replace “Welcome to app!” with “Hi, this app!”.
3. Save the file.
4. Ensure your development server (ng serve) is running (refresh the browser if necessary). You should see the updated text reflected instantly!

Data Binding: Dynamic Content

We just witnessed data binding in action. This powerful concept allows us to dynamically update content based on variables. In the app.component.html file:

• The curly braces ({{ }}) indicate where to display dynamic values.
• We have a variable named title defined in the TypeScript file (app.component.ts).

Inspecting the Page Source

Right-click on the page and select “Inspect” or “Inspect Element” to view the source code. You won’t see the original app.component.html code directly; instead, you’ll see the processed and optimized code generated by the Angular build process.

Understanding app-root

• Look for app-root in the app.component.ts file’s selector property.
• This defines a custom HTML tag for your component.
• In the index.html file, you’ll see this tag used to render your component’s content.

Adding User Interaction: Dynamic Name Display

1. In app.component.html, add an input field (type=”text”) and a paragraph to display a name.
2. In app.component.ts, change title to name and set its initial value (e.g., “Max”).
3. Bind the input field’s value to the name variable using the [(ngModel)] directive. This directive handles two-way data binding, synchronizing the input value with the name variable.

Resolving the “ngModel” Error

If you encounter a “Can’t bind to ‘ngModel’…” error, it means Angular doesn’t recognize ngModel by default. Modules provide features in Angular. To use ngModel, we need to import the FormsModule:

1. Open app.module.ts.
2. Import FormsModule from @angular/forms:

3. Add FormsModule to the imports array in app.module.ts.

Experimenting with User Input

Now, try typing in the input field. You’ll see the displayed name update automatically thanks to ngModel! We’ve just created a simple, interactive Angular component.

Conclusion

This journey has introduced you to modifying the code, data binding, and using directives in your first Angular application. We’ll continue to delve deeper into these concepts and explore more advanced features in the upcoming lectures.