Angular Components

Component is the main building blocks of angular application. Component is basically a class that decorated with @Component and contains application data, logics and template. Angular application contains atleast one component that is root component known as AppComponent.

Component consist of:

1. Class - HTML template and styles to display data in the app. It is also called as a view, which is seen by the user on the screen to interact

2. Template - We define and initialize the state of our component and define the component’s behavior as functions. This contains properties and methods and has the code which is used to support the view. It is defined in Typescript.

3. Decorator & metadata - It defines the behavior of a component. Component metadata is applied to the class using the@Component decorator. Different behavior of the component can be passed as properties of the object, which is and input parameter of the @Component decorator

component

Component's metadata

@Component decorator belongs from Component class that imported from @angular/core. It have many metadatas like:

  • 1. selector
    • A component can be used using the selector. The selector property is set to if created using cli command. We can use the component on the page or different views using the given selector name for component.
  • 2. template
    • A template is the part of the component which gets rendered on the page. It is use for inline template. tilt symbol (`) used to create multiple lines in the template. A single line inline template can be created using either single quotes or double quotes. Can not use template and templateUrl together.
  • 3. templateUrl
    • Angular allow us to put the template in an external HTML file. The relative path or absolute URL of a template file for an Angular component. Best practice is to keep the template and component in the same folder.
  • 4. styles
    • Use for defining inline css syles.
  • 5. styleUrls
    • use for reffering external css files.
  • 6. providers
    • The component can use various Services or custom services. To use a service in a component, we need to follow two steps: Import the service in the component, and Set the value of the provider’s property in the metadata. Component metadata has an array type property called the provider. In the providers, we pass a list of services being used in the component.

Let’s create a Component to display “Welcome to ProgramIdea” on the page


1. Create the Component using CLI commands

run the below cli command to generate an angular component(Angular CLI must be installed):

ng generate component test

component

2. Create the Component manually

  • 1. Create a folder name test inside src/app folder.

  • 2. Create a test.component.html file

  • 3. Create a test.component.ts file

  • 4. Create a test.component.css file (if needed)

  • component

  • 5. Go to AppModule.ts file, import the TestComponent class and add in declarations section of @NgModule
  • component

  • 6. Go to test.component.ts file
    • a. Create a TestComponent class
    • b. Import the @Component decorator from @angular/core
    • c. Add a name in selector metadata
    • d. Add the path of test.component.html file in templateUrl metadata
    • e. Add the path of test.component.css file in styleUrls metadata
    • f. Declare a string vaiable and assigned the message text.
  • component

  • 7. Go to test.component.html file and defined the string variable inside intropolation syntax.
  • component
  • 8. Go to AppModule.ts file and add the routing
  • 9. run tha application by command : ng serve
  • output