Component Selector in Angular Tutorial 🚀

Welcome to the Component Selector lesson in Angular! This tutorial will guide you through understanding and using one of Angular's powerful features. By the end of this lesson, you'll be able to select and interact with Angular components like a pro 🎯

What is a Component Selector? 🤔

In Angular, a component selector is a string that is used to identify the component and attach it to the DOM (Document Object Model). It consists of two parts: the local name and the optional prefix.

📝 Local Name: It's the unique name given to an Angular component, and it's case-insensitive.

📝 Selector Prefix (optional): It's a string added before the local name to create a unique CSS scope. This can be useful when you have multiple components sharing the same local name.

Creating a Simple Component 👨‍💻

Let's start by creating a simple component. Open your terminal, navigate to your Angular project, and run the following command:

bash

ng generate component my-component

This command will create a new component named my-component for us.

Now, let's take a look at the generated files:

src/app/my-component/my-component.component.ts (TypeScript file)
src/app/my-component/my-component.component.html (HTML template)
src/app/app.module.ts (Module where our new component will be added)

Component Selector Configuration 🧩

Now, let's set our component selector. Open the my-component.component.ts file and look for the selector property:

typescript

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
  // ...
}

Here, app-my-component is the component selector. You can change it to a name that suits your component.

Using the Component 🌐

Now that we've created and configured our component, let's use it in our application. Open the app.component.html file and add the following code:

html

<app-my-component></app-my-component>

Now, run your Angular application:

bash

ng serve

You should see your my-component being displayed on the screen 💡

Quiz Time 🎓

Component Interaction 🤝

In the next lessons, we'll dive deeper into Angular components, learning how to pass data, use services, and handle events between components. Stay tuned! 📝

Happy coding! 🎉