angular components
Page preview (5 pages)
Scroll down 👇
![t.component.html. 2. modules a module is a container for organizing related components, directives, pipes, and services. every angular app has at least one module, called the root module (appmodule). steps to understand modules root module (appmodule) open src/app/app.module.ts: import { ngmodule } from '@angular/core'; import { browsermodule } from '@angular/platform-browser'; import { appcomponent } from './app.component'; import { mycomponent } from './my-component/my-component.component'; @ngmodule({ declarations: [ appcomponent, mycomponent // declare all components here ], imports: [ browsermodule // import other modules here ], providers: [], // register services here bootstrap: [appcomponent] // root component to bootstrap }) export class appmodule { } @ngmodule decorator : defines metadata for the module. declarations: list of components, directives, and pipes that belong to this module. imports: other modules required by this module. providers: services available to the entire application. bootstrap: the root component to load when the app starts. feature modules as your app …](/media/previews/pages/preview_kRkjHeQ.webp "angular components - Page 2")
![}} property binding : bind html attributes to component properties: event binding : handle user events: click me two-way binding : use [(ngmodel)] for two-way data binding: hello, {{ name }}! directives structural directives : modify the dom layout (e.g., *ngif, *ngfor): this is visible {{ item }} attribute directives : modify the appearance or behavior of elements (e.g., ngclass, ngstyle): active class 4. metadata metadata provides additional information about a class (e.g., a component or module). it’s defined using decorators like @component and @ngmodule. examples of metadata component metadata @component({ selector: 'app-example', templateurl: './example.component.html', styleurls: ['./example.component.css'] }) module metadata @ngmodule({ declarations: [appcomponent], imports: [browsermodule], providers: [], bootstrap: [appcomponent] }) 5. services and dependency injection a service is a class that provides shared functionality (e.g., fetching data from an api). dependency injection (di) is a design pattern used to inject services into components or other services. steps to create and …](/media/previews/pages/preview_mjgQyLY.webp "angular components - Page 3")
![tructure (ngmodule) angular apps are organized into modules , which help manage complexity and enable lazy loading. types of modules root module (appmodule) the entry point of the application. defined in app.module.ts. feature modules organize related components, directives, and pipes. example: dashboard.module.ts. shared modules contain reusable components, directives, and pipes. example: shared.module.ts. lazy-loaded modules loaded on demand to improve performance. example: admin.module.ts. steps to lazy load a module create a feature module ng generate module admin --route admin --module app.module configure routing open app-routing.module.ts: const routes: routes = [ { path: 'admin', loadchildren: () => import('./admin/admin.module').then(m => m.adminmodule) } ]; run the app navigate to /admin to load the adminmodule. step 1: creating and registering components what is a component? a component in angular is a typescript class that controls a part of the ui. it consists of: a template (html structure). a class (typescript logic). metadata (decorator @component). steps …](/media/previews/pages/preview_VBW88Oh.webp "angular components - Page 4")
![mponent here ], imports: [browsermodule], providers: [], bootstrap: [appcomponent] }) export class appmodule { } use the component in a template add the component’s selector (defined in my-component.component.ts) to another template, such as app.component.html: welcome to the app step 2: component lifecycle hooks what are lifecycle hooks? angular components have a lifecycle managed by angular itself. lifecycle hooks allow you to tap into key moments in a component’s life, such as initialization, rendering, and destruction. common lifecycle hooks ngoninit called once after the component is initialized. use it to fetch data or perform setup logic. import { component, oninit } from '@angular/core'; @component({ selector: 'app-my-component', template: ` {{ message }} ` }) export class mycomponent implements oninit { message: string; ngoninit() { this.message = 'component initialized!';} } ngondestroy called just before the component is destroyed. use it to clean up resources (e.g., unsubscribe from observables). import { component, ondestroy } …](/media/previews/pages/preview_Xf6UACo.webp "angular components - Page 5")
About "angular components"
angular components step 1: understanding angular architecture angular is built on a component-based architecture , which means the application is divided into reusable, self-contained pieces called components . these components are organized into modules , and they rely on services for shared functionality. let’s dive into each part of angular’s architecture. 1. components a component is the most basic building block of an angular application. it controls a part of the ui and consists of three main parts: template : defines the view (html structure). class : contains the logic (typescript code). metadata : provides additional information about the component. steps to create and understand a component generate a component use angular cli to generate a new component: ng generate …
This file contains 32 pages in PPTX format (303.3 KB). To download "angular components", click the Telegram button on the left.
PPTX
DOCX
PPTX
DOCX
DOCX
PPTX
PDF
PPTX
DOCX
PPTX
DOC
DOC