#7 angular 8 tutorial in hindi | Directive in angular application

#7 angular 8 tutorial in hindi | Directive in angular application | Dire...

#7 angular 8 tutorial in hindi | Directive in angular application | Directive in angular 9 by Ashish

What is an Angular Directive?
Directives are the functions which will execute whenever Angular compiler finds it. Angular Directives enhance the capability of HTML elements by attaching custom behaviors to the DOM.

From the core concept, Angular directives are categorized into three categories.

Attribute Directives
Structural Directives
Components
Attribute Directives
Attribute Directives are responsible for manipulating the appearance and behavior of DOM elements. We can use attribute directives to change the style of DOM elements. These directives are also used to hide or show particular DOM elements conditionally. Angular provides many built-in Attribute Directives like NgStyle, NgClass, etc. We can also create our own custom Attribute Directives for our desired functionality.

Structural Directives
Structural Directives are responsible for changing the structure of the DOM. They work by adding or removing the elements from the DOM, unlike Attribute Directives which just change the element’s appearance and behavior.

You can easily differentiate between the Structural and Attribute Directive by looking at the syntax. The Structural Directive’s name always starts with an asterisk(*) prefix, whereas Attribute Directive does not contain any prefix. The three most popular built-in Structural Directives Angular provides are NgIf, NgFor, and NgSwitch.

Components
Components are directives with templates. The only difference between Components and the other two types of directives is the Template. Attribute and Structural Directives don't have Templates. So, we can say that the Component is a cleaner version of the Directive with a template, which is easier to use.

Comments

#2 Angular 8 Tutorial in Hindi | Project Structure and File Structure in...

Angular 8 File Structure e2e(end-to-end) – This folder contains test cases for testing the complete application along with its specific configuration files. node_modules – Contains all the node-modules used in the angular application. src – Complete source code of the application resides in src folder. app – root component of the application. assets – contains all the images or resources used in the application. environments – contains build configuration environments of the application. We can create any target environment and specify its configuration here. index.html – This is the main html page which is rendered when someone opens your website or application. main.ts – This is the main entry point of the angular application which compiles the AppModule and renders the specified bootstrap component in the browser. styles.css – Contains all the styles to be used as globally in the application....

Build Realtime Chat Application using Angular 13.

in this video, we will see Angular chat application, Angular chat app, angular 13 chat application, realtime chat application with angular, real-time chat application,build a chat app with node and socket.io, build a chat app with angular and socket.io,what's app chat functionality,building a chat application with angular node js and socket.io Angular chat application with testycodeiz,angular chat project from scratch, angular project from scratch, angular 13 chat application with testycodeiz, angular chat app with testycodeiz, angular with testycodeiz, agular project with testycodeiz #chatapp, #angularchat #testycodeiz

Angular 11 CRUD Application Using MEAN Stack,angular CRUD Example, Angul...

Angular 11 CRUD Application Using MEAN Stack, angular CRUD Example, Angular crud project,angular crud tutorial,angular crud operation,angular crud application,angular crud with mean stack, #Angular11 , #CRUD , #Angularproject ,

Testy Codeiz

Search This Blog