1.How to pass data from parent to child or child to parent.
Ans-Parent to child: Data can be passed from a parent component to a child component by using input properties. In the parent component, you define a property and bind it to the child component using square brackets. For example, `<app-child [data]=”parentData”></app-child>`. In the child component, you need to declare an input property with the same name, like `@Input() data: any;`. The child component can then access the data through the `data` property.
– Child to parent: Data can be passed from a child component to a parent component by using output properties and event emitters. In the child component, you define an output property using `@Output()`, along with an event emitter. For example, `@Output() dataEvent = new EventEmitter<any>();`. When you want to pass data from the child to the parent, you emit an event using `this.dataEvent.emit(data);`. In the parent component, you can capture the event by binding to the child component’s event property and providing a handler function. For example, `<app-child (dataEvent)=”handleData($event)”></app-child>`. The `handleData()` function in the parent component will be called with the emitted data.
2.Latest angular version
Ans-As of my knowledge cutoff in September 2021, the latest stable version of Angular was Angular 12. However, please note that the Angular framework is actively developed, and new versions may have been released since then. It’s always a good idea to check the official Angular website or the Angular GitHub repository for the latest version information.
3.Types of data binding
Ans-There are four types of data binding in Angular:
– Interpolation (`{{ }}`): Allows you to bind data from the component to the template by embedding expressions within double curly braces. For example, `<h1>{{ title }}</h1>`.
– Property binding (`[]`): Binds a property of an HTML element to a property of a component. It allows you to set the value of an element’s property dynamically based on the component’s data. For example, `<input [value]=”name”>`.
– Event binding (`()`): Binds an event of an HTML element to a method of a component. It allows you to listen to events raised by elements and execute a method in response. For example, `<button (click)=”submit()”>`.
– Two-way binding (`[()]` or `[(ngModel)]`): Combines property binding and event binding together. It allows you to bind a property of an element and also listen to the changes made to that property. For example, `<input [(ngModel)]=”name”>`.
4.Angular lifecycle
Ans-The Angular lifecycle consists of several phases or hooks that are executed at different stages of a component’s creation, rendering, and destruction. The main lifecycle hooks are:
– `ngOnChanges`: Called when the input properties of a component change.
– `ngOnInit`: Called once when the component is initialized after the constructor.
– `ngDoCheck`: Called during every change detection cycle to detect changes that Angular cannot or won’t detect automatically.
– `ngAfterContentInit`: Called after the component’s content is initialized.
– `ngAfterContentChecked`: Called after the component’s content has been checked.
– `ngAfterViewInit`: Called after the component’s view and child views are initialized.
– `ngAfterViewChecked`: Called after the component’s view and child views have been checked.
– `ngOnDestroy`: Called just before the component is destroyed.
These hooks allow you to perform tasks at specific stages of a component’s lifecycle, such as initializing data, reacting to changes, or cleaning up resources.
5.SPA
Ans-A Single Page Application (SPA) is a web application that operates within a single HTML page, where the page does not need to be reloaded during its use. SPAs provide a more fluid user experience by dynamically updating the content of the page without requiring a full page reload. Angular is often used to build SPAs because of its powerful features like two-way data binding, routing, and component-based architecture, which make it easier to develop complex web applications with rich user interfaces.
6.Transpiring
Ans- Transpiling in Angular refers to the process of converting code written in one programming language into another programming language. In the context of Angular, it’s typically used to convert TypeScript code into JavaScript code.
7.Diff between typescript and javascript
Ans-TypeScript: TypeScript is a superset of JavaScript that adds optional static typing, classes, interfaces, modules, and other features to the JavaScript language. It compiles down to plain JavaScript and can be used in any JavaScript project. TypeScript provides type checking during development, which helps catch errors early and improves code quality. It is commonly used in Angular projects because Angular itself is written in TypeScript.
JavaScript: JavaScript is a dynamic scripting language that runs in web browsers and on servers. It is the standard language of the web and is used to add interactivity and behavior to websites. JavaScript is dynamically typed, meaning variable types can change during runtime.
8.Viewing encapsulations
Ans-In Angular, component encapsulation refers to how the styles of a component are scoped and applied. There are three encapsulation options available in Angular:
Emulated (default): The styles defined within a component are scoped to that component only and do not affect other components. Emulated encapsulation uses CSS rules and special attributes to isolate component styles.
Shadow DOM: With this encapsulation mode, Angular uses the browser’s Shadow DOM feature to encapsulate the styles of a component. Styles defined within a component are scoped to that component’s Shadow DOM and do not affect other components.
None: This mode disables encapsulation, allowing the styles of a component to be applied globally across the application. This can lead to style collisions and is generally not recommended unless there is a specific need for global styles.
The encapsulation mode can be specified in the component decorator using the encapsulation property, like encapsulation: ViewEncapsulation.Emulated.
9.Decoupling capacitor
Ans-
10.Dependency methods
Ans- In Angular, dependency injection is a design pattern used to provide dependencies (services or objects) to a class or component. Dependency injection helps in decoupling the dependencies, making the code more modular and testable. Dependency injection can be achieved in Angular through constructor injection, where the dependencies are provided as parameters to the class constructor.
11.AOT
Ans- AOT is a compilation technique used in Angular to convert the application’s TypeScript code into efficient JavaScript code during the build process, before it is delivered to the client’s browser. With AOT compilation, the Angular templates are also pre-compiled into JavaScript, resulting in faster rendering and improved performance. AOT eliminates the need for the browser to compile the templates at runtime, reducing the initial load time of the application.
12.Cache
Ans-In the context of web applications, caching is the process of storing frequently accessed data or resources in memory or on disk for faster retrieval. Caching helps in improving the performance and reducing the load on the server by serving the cached data instead of generating it from scratch.
13.How do u manage configuration in .net core
Ans-In .NET Core, configuration management is handled through the IConfiguration interface and the related configuration providers. Configuration values can be stored in various sources such as JSON files, XML files, environment variables, command-line arguments, and more. The configuration providers load the configuration values from these sources, and the IConfiguration interface allows accessing these values throughout the application. The configuration values can be used to configure various aspects of the application, such as database connections, logging settings, feature toggles, and more.
14.Lifetime of services
Ans-In Angular, services are used to provide shared functionality and data across multiple components. The lifetime of a service determines how long it exists and when it gets created and destroyed.
There are three main lifetimes for Angular services:
Singleton: The service instance is created once and shared across the entire application. It remains in memory until the application is closed or refreshed.
Scoped: A new instance of the service is created for each component that belongs to the same NgModule. When the component is destroyed, the service instance is also destroyed.
Transient: A new instance of the service is created every time it is requested. The instance is not shared between components or different parts of the application.
You can specify the lifetime of a service by configuring it in the @Injectable decorator. By default, services are provided as singletons.
15.Diff b/w statis and normal class
Ans-In the Angular context, the difference between a static class and a normal class can be summarized as follows:
Instantiation:
Normal Class: A normal class can be instantiated using the “new” keyword, creating objects with their own state and behavior. Instances of a normal class can be created and used throughout the application.
Static Class: Angular does not have a direct concept of a static class. However, static members (properties and methods) can be defined within a class to provide shared functionality without the need for instantiation.
Accessing Members:
Normal Class: Properties and methods of a normal class are accessed through instances of the class. Each instance has its own set of property values and can invoke methods with its specific behavior.
Static Class: Static members in Angular can be accessed directly through the class itself, without the need for object instantiation. They are accessed using the class name followed by the member name. Since there are no instances, all references to static members will refer to the same shared data or functionality.
State and Data Sharing:
Normal Class: Instances of a normal class can have their own state and store unique data. This allows for individual instances to have different values for their properties, enabling data isolation.
Static Class: Static classes, as such, are not commonly used in Angular. However, static members can be used within a class to provide utility functions, constants, or shared data that is independent of any specific instance. They allow for shared data or functionality across different parts of the application.
In summary, while normal classes in Angular can be instantiated, have their own state, and enable data isolation through instances, static classes are not directly supported in Angular. However, static members within a class can provide shared functionality or data without the need for instantiation.
16.Auto mapping
Ans-In the context of Angular, “auto mapping” typically refers to the process of automatically binding data from a source object to a target object or view. This is commonly achieved using data binding techniques in Angular, such as property binding or two-way data binding. Auto mapping eliminates the need for manual mapping or assignment of values between objects, allowing for seamless synchronization of data between the source and target.
17.Directives in angular
Ans-Directives in Angular are a powerful feature that allows you to extend the functionality of HTML elements or create reusable components. There are three types of directives in Angular:
Component Directives: These directives are used to create reusable and modular components with their own templates, styles, and behavior. Components are the building blocks of Angular applications.
Attribute Directives: Attribute directives modify the behavior or appearance of an existing element by applying custom logic to the element. They are used as attributes on HTML elements and can dynamically manipulate attributes, styles, or behaviors.
Structural Directives: Structural directives alter the structure of the DOM by adding, removing, or manipulating elements based on conditions. Examples of structural directives in Angular include ngIf, ngFor, and ngSwitch.
Directives in Angular provide a way to encapsulate and reuse functionality, making it easier to create dynamic and interactive web applications.
18.Middlewhere static files
Ans-In Angular, static files such as images, stylesheets (CSS), and JavaScript files are typically stored in the “assets” folder within the project structure. By default, the “assets” folder is located at the root level of the Angular project. You can place your static files in this folder and refer to them in your application using relative paths.
19.Bootstrapping in angular
Ans-Bootstrapping in Angular refers to the process of launching an Angular application by loading the root module (typically named “AppModule”) and its associated components. During bootstrapping, Angular initializes the application, creates the component tree, and starts rendering the application on the browser. The bootstrap process begins by calling the “bootstrapModule” function in the main.ts file of an Angular project.
20.Transferring data
Ans-Transferring data in Angular can be achieved through various mechanisms such as property binding, event binding, and two-way data binding.
Property Binding: Allows you to bind a component property to an HTML element property or attribute. It’s denoted by square brackets (e.g., [property]=”value”) and enables data flow from the component to the view.
Event Binding: Enables you to bind HTML events (e.g., button clicks, mouse events) to component methods. It’s denoted by parentheses (e.g., (event)=”method()”) and allows data flow from the view to the component.
Two-Way Data Binding: Combines both property binding and event binding into a single syntax using the “[(ngModel)]” directive. It allows data synchronization in both directions, meaning changes in the component update the view, and changes in the view update the component.
21.Lazy loading
Ans-Lazy loading in Angular is a technique used to load modules on-demand or when they are needed, rather than loading the entire application upfront. By employing lazy loading, you can split your application into smaller feature modules and load them dynamically when a user navigates to a specific route. This approach improves the initial loading time and allows for more efficient use of network resources.
22.Http verbs and filters
Ans-In Angular, HTTP verbs and filters are used for making HTTP requests to a server and filtering the data received.
HTTP Verbs: Angular provides several methods for making HTTP requests, commonly known as HTTP verbs, including GET, POST, PUT, PATCH, and DELETE. These methods correspond to the CRUD (Create, Read, Update, Delete) operations commonly performed on server resources.
Filters: Angular provides the “HttpClient” module, which allows you to apply filters to the HTTP requests and responses. These filters can intercept the requests and responses, modify them, add headers, handle errors, and perform various transformations before they reach the destination or the caller.
23.Elements of angular lifecycle
Ans-The elements of the Angular lifecycle refer to the different stages or phases through which a component goes during its lifetime. The key elements include:
ngOnChanges: Invoked when the input properties of a component change.
ngOnInit: Called once after the component is initialized and its inputs are resolved.
ngDoCheck: Triggered during each change detection cycle and allows you to perform custom change detection.
ngAfterContentInit: Executed after the component’s content is initialized.
ngAfterContentChecked: Invoked after the component’s content has been checked.
ngAfterViewInit: Called after the component’s view has been initialized.
ngAfterViewChecked: Executed after the component’s view has been checked.
ngOnDestroy: Called just before the component is destroyed and allows for cleanup tasks.
24.Binding techniques
Ans-Binding techniques in Angular are used to establish a connection between the data in a component and its associated view template. The key binding techniques in Angular are:
Interpolation: Uses double curly braces (e.g., {{ expression }}) to bind component properties directly into the view template. The expression is evaluated, and its result is displayed in the template.
Property Binding: Binds a component property to an HTML element property or attribute using square brackets (e.g., [property]=”value”). This allows you to dynamically update the element’s property based on the component’s data.
Event Binding: Binds HTML events (e.g., button clicks, mouse events) to component methods using parentheses (e.g., (event)=”method()”). This enables the component to respond to user actions and trigger the corresponding methods.
Two-Way Data Binding: Combines property binding and event binding into a single syntax using the “[(ngModel)]” directive. It establishes a synchronized connection between the component and the input element, allowing changes in either the component or the input to update each other.
