Angular Flashcards
What is angular
Angular is a powerful open-source framework developed by Google for building web applications. It follows a component-based architecture, where reusable components encapsulate HTML, CSS, and logic. Angular provides features like data binding, dependency injection, routing, directives, services, and TypeScript integration. It also offers a CLI for project scaffolding and automation. With Angular, you can build robust and scalable applications with ease.
How would you set up the angular environment?
Verify that Node.js and npm (Node Package Manager) are properly installed by running the following commands in your terminal:
node -v
npm -v
Install the Angular CLI globally by running the following command:
npm install -g @angular/cli
Create a New Angular Project:
ng new my-angular-app
Define a single page application
A Single Page Application (SPA) is a web application that operates within a single page, dynamically updating content without page reloads. It uses JavaScript and client-side frameworks like Angular or React to provide a seamless user experience, faster performance, and easier code maintenance. SPAs load initial resources upfront and fetch data asynchronously, resulting in a smooth and responsive application.
Define Ngmodule
NgModule is a foundational concept in Angular that organizes related components, directives, pipes, and services into cohesive units. It promotes modularity, reusability, and maintainability by grouping functionalities together. It defines the interactions between these elements and facilitates code organization and separation of concerns. By using NgModule, Angular applications can be structured, scalable, and efficient.
What is an angular component
An Angular component is a reusable and self-contained building block of an Angular application. It combines HTML templates, CSS styles, and TypeScript code to define a specific UI element or functionality. Components follow a component-based architecture, allowing for modular and scalable development. They have inputs and outputs for data exchange and can have lifecycle hooks for performing specific actions at certain points. Components promote code reusability, separation of concerns, and enhance the maintainability of Angular applications.
what is an angular Template
Template is a blueprint for a part of the user interface(UI).
Templates can be considered HTML documents, as they are written in HTML.
a special syntax can be used in templates to add additional functionality. this is an improvement over the normal HTML page.
As Angular template is only a part of UI, some tags like <html>,<body> are not included in templates.
Angular template is directly related to the component view.
What are template statements?
Template statements in Angular are used to handle user interactions and define the behavior of the application based on events. They are written directly in the HTML templates of Angular components using event binding syntax. By using template statements, you can create interactive and dynamic user interfaces, responding to user actions and updating the application state accordingly.
To define template reference variables.
Template reference variables in Angular allow you to capture references to specific HTML elements or Angular components within templates. They are defined using the “#” symbol followed by a name and are used to access and manipulate the referenced elements or components. Template reference variables are useful for accessing DOM elements or interacting with child components in parent components.
Describe one way binding
One-way binding in Angular enables a unidirectional flow of data from the component to the template. It allows you to display component data in the template without updating the component when changes occur in the template. One-way binding is denoted by square brackets “[]” and is useful for displaying data in the template based on the component’s state.
Describe two way binding
Two-way binding in Angular enables a bidirectional flow of data between the component and the template. It allows changes in the component to automatically update the template, and vice versa. Two-way binding is denoted by “[(ngModel)]” and is commonly used in form fields to keep the component and template data synchronized in real time.
Define Structural directives
Structural directives in Angular are special directives that allow you to dynamically manipulate the DOM structure based on conditions or collections. They include ngIf, ngFor, and ngSwitch. ngIf conditionally adds or removes elements, ngFor iterates over collections to generate elements, and ngSwitch displays different elements based on expressions. Structural directives provide flexibility in controlling element presence, repetition, and conditional rendering in Angular templates.
To define Angular Attribute directives.
Attribute directives in Angular allow you to modify the behavior and appearance of HTML elements by applying custom attributes. They are used to enhance elements with additional functionality or create reusable behaviors. Attribute directives can modify element behavior, manipulate properties, add event listeners, and change appearance by applying styles or animations. They are created using a TypeScript class with the @Directive decorator.
Examples
ngClass: used to add and remove a set of CSS classes.
ngStyle : used to add and remove a set of HTML styles.
ngModel: used to add two-way data binding to an HTML form element.
Most common examples of built-in structural directives
ngIf: used to conditionally create or dispose of subviews from the template.
ngFor: used to repeat a node for each item in a list.
ngSwitch: used for a set of directives that switch among the alternative views.
Pipes
In any full stack application, the data is received from the backend in HTTP format. when that data is displayed on the HTML page, the format should be changed. The pipes are used to transform data from one form to other.
Pipes are classified into two types.
Default Pipes
Custom Pipes
Data, currency, case and per cent are a few commonly used default pipes.
Custom pipes
Custom pipes in Angular are used to transform data in the template before rendering. They are created by implementing the PipeTransform interface in a TypeScript class. Custom pipes enable you to perform various transformations like formatting dates, sorting arrays, or applying custom logic. They are reusable and provide a convenient way to apply data transformations in Angular applications.
