Skip to main content
pelatihan
.org
Learn. Practice. Grow.
Category
EN
Sign in
Sign up
Menu
Angular Curriculum: 3 Chapters, 32 Lessons — pelatihan.org
Home
/
Catalog
/
Angular
/
Curriculum
Curriculum
Angular Curriculum
Learn Angular online with 32 structured lessons, code examples, and 160 quiz questions.
32 lessons
3 chapters
160 questions
Summaries and key points are free to preview. Full lessons, code examples, and quizzes require a subscription.
01
Angular Tutorial
18 lessons
01
Angular Home
This page is the gateway to all Angular materials in W3Schools. Angular is an open-source JavaScript framework from Google for building component-based single-page web…
02
Angular Intro
Angular is a front-end framework that breaks down applications into small pieces called components. Each component has HTML templates, TypeScript logic, and data that can be…
03
Angular Get Started
To start Angular you need Node.js and Angular CLI installed via npm. The `ng new` command creates a new project complete with configuration, and then `ng serve` runs the…
04
Angular First App
The first Angular application was formed from a root component called AppComponent that was bootstrapped at main.ts. When an application is loaded, Angular renders the…
05
Angular Templates
Templates are HTML parts that describe the look of a component. In the template you can use typical Angular syntax such as interpolation, binding property, and binding event.…
06
Angular Components
The component is a TypeScript class with a decorator @Component that describes how a UI part is made. It contains a selector as an HTML marker, a template as a display, as well…
07
Angular Data Binding
Data binding connects data in a class component to a template view. There are one-way bindings such as interpolation and property binding, binding events to respond to user…
08
Angular Directives
Directives are classes that change the appearance or behavior of DOM elements. Angular identifies three types: components, structural directives such as *ngIf and *ngFor that…
09
Angular Events
Event binding allows components to respond to user actions such as clicks, hover, and inputs. You write events in parentheses, for example, click="proses()", and then you point…
10
Angular Conditional
Conditional rendering only displays elements if certain conditions are met. Angular provides the syntax of modern @if along with @else and @else if, as well as the old *ngIf…
11
Angular Lists
Displaying a data set such as an array is usually done with @for or directives *ngFor. Angular repeats the template elements for each item and provides context such as index,…
12
Angular Forms
Template-driven forms make HTML forms interactive with two-way data binding using ngModel and name. Angular provides form status such as valid, dirty, and error for validation.…
13
Angular Router
Angular Router converts an application to SPA by mapping the URL to a specific component. You define the list of routes in the configuration, then display the active component…
14
Angular Services & DI
A service is a class of logic or data that can be used together by many components. Through dependency injection, you just inject the service through the constructor without…
15
Angular HTTP Client
Angular provides HttpClient to communicate with the API via HTTP. Methods like get, post, put, and delete produce Observables that can be linked to subscribe. The response…
16
Angular Pipes
Pipes are features for transforming values when displayed in a template, such as date format, currency, or capital letters. Angular provides built-in pipes such as date,…
17
Angular Lifecycle Hooks
Each component has a life cycle from being made, rendered, to being destroyed. Hooks like ngOnInit are used to initialize data after the constructor, while ngOnDestroy is used to…
18
Angular Styling
Each Angular component can have its own CSS file so that the style remains isolated between the components. The view encapsulation feature controls how widely CSS is applied,…
02
Advanced Angular
14 lessons
01
Angular App Bootstrap
The bootstrap process is the initial stage of Angular building applications from a browser platform. The bootstrapApplication function in main.ts starts the root application by…
02
Angular Control Flow
The new Angular flow control syntax uses the easily-read @if, @for, @switch, and @defer blocks directly in the template. @defer allows certain sections to load lazily according…
03
Angular Signals
Signals are a feature of modern Angular reactivity in the form of state values that track its changes. Made with signal(), values are read with parentheses and changed by set()…
04
Angular Change Detection
Change detection is an Angular mechanism that updates DOMs when data changes. Angulars historically used Zone.js to detect asynchronous activity, but zoneless approaches and…
05
Angular Dynamic Comp
Dynamic components allow you to load a component at runtime without typing the tag directly into the template. The case is usually capital, tooltip, or plugin that comes from the…
06
Angular Advanced DI
Advanced dependency injection allows you to register providers in a variety of ways: real value, factory, custom tokens, to multi-provider. InjectionToken helps inject…
07
Angular Router Advanced
Advanced routers include lazy loading routes, child routes, guard, and resolver. With loadChildren, a module or set of components is only loaded when the route is visited. Guards…
08
Angular HTTP Interceptors
The interceptor allows you to modify any HTTP request or response in one place, such as adding an authentication token or handling an error 401. Modern angular uses interceptors…
09
Angular Forms Advanced
Reactive forms programmatically build form structures in the class components using FormBuilder, FormGroup, and FormControl. Validation can be combined, synchronized, and…
10
Angular State Management
State management is a way of managing shared data across applications to stay consistent. For a small application, one service with a signal is enough. For large applications,…
11
Angular Animations
Angular animation allows for transitions of elements such as input, output, and declarative change of status. The @angular/animations module provides a trigger, state, and…
12
Angular Testing
Angular provides Karma and Jasmine-based testing tools to test components, services, and pipes. TestBed allows you to create mini-test modules to run components in isolation.…
13
Angular Security
Angular application security includes protection from XSS with built-in sanitizers, the use of HTTPS, as well as proper authentication token handling. Angular changes the…
14
Angular SSR & Hydration
The SSR (Server-Side Rendering) renders pages on servers so that the first content is more quickly visible to users and search engines. Once the HTML is sent, the Angular in the…