Skip to main content

Angular Directives


Before move to directives need to understand what is component? and what is directive?


In the above figure we have these two elements, component and directive

Directive:- It have some logic but not contains the structure

Component:- It is an element that specifies directive element and have the list of other directive instances.
Why directives are used in angular?       
  • use to change the appearance behavior or layout of Document Object Model(DOM)
  • helps to extend HTML
It can be classified into 3 categories:-



1.Component Directives:-
  • Used in main class.
  • It possess the detail about how the component processed at run time.
2.Structural Directives:-
  • They are responsible for HTML layout.
  • Changing the DOM structure by adding,removing or manipulate the elements.
  • It starts with * symbol.
These are the examples of Structural directives.
  • ngIf Directive:-Use to add or remove the HTML element according to the expression.
  • ngfor Directive:-Use to repeat a portion of HTML template.
  • ngswitch Directive:-Allow to add or remove DOM element.

3.Attribute Directives:-
They are used to change the behavior of DOM element. *ngclass and *ngstyle are examples of attribute directive.
  • ngclass Directive:-used to add or remove the css class from html element
  • ngstyle Directive:-used to modify the style of html element and used to change the html element dynamically.

Comments

Post a Comment

Popular posts from this blog

Usage of sensors ,Actuators and Entites in ARGoS Simulator

ARGoS is a physics-based simulator designed to simulate large-scale robot swarms. ARGoS is written in C++. We can add new robots, actuators, sensors, physics engines easily in this simulator. The simulator can be configured with an XML file. In the ARGoS Environment you can get to know the usage by following command in terminal. argos3 -q <name> Battery:-Its returns the current battery level of a robot Box:- It can be used to model walls and obstacles. It can be movable or not. It is possible to add any number of colored LEDs to the box. In this way, the box is visible with a robot camera cameras:-The sensor can be initialized with a number of cameras each running different algorithms for detecting different objects in the simulation colored blob omni directional camera:- This sensor accesses an omni directional camera that detects colored blobs. The sensor returns a list of blobs, each defined by a color and a position with respect to the robot reference point on the ground colo...
Post a Comment
Read more

Angular 8 Introduction

First need to know about what is Angular? open Source: It means product gives permission to use its source code, design documents, or content. Platform for developing client-side web applications: Client side refers to the software that users interact with that run on their web browser. Client side web development involves interactivity and collecting or displaying data. i.e it is use for front-end development. It is also use to create dynamic web applications . It means we can change data/information through time-to- time, location-to-location and user-to-user. Type Script framework: It is a Type Script based JavaScript framework. It is written in Type Script and compiled in to JavaScript. Because browser can only understand JavaScript. Type Script is a type safe language i.e it is ensure that an operation is working on the right kind of data type. Versions of Angular framework Angular JS : Angular JS is a JavaScript based open-source front end web framework developed and maintain...
2 comments
Read more