A Component is a directive that uses shadow DOM to create encapsulated visual behavior. Usually, components are used to create UI widgets by breaking up the application into smaller parts. In short, we can say that a component (@component) is a directive-with-a-template.
A list of the major differences between a Component and a Directive in Angular:
|Components are generally used for creating UI widgets.||Directives are generally used for adding behavior to an existing DOM element.|
|We use @Component meta-data annotation attributes to register a component.||We use @Directive meta-data annotation attributes to register directives.|
|It is used to break up the application into smaller parts called components.||It is used to design re-usable components.|
|Only one component is allowed to be used per DOM element.||Multiple directives are allowed to be used per DOM element.|
|@View decorator or templateurl/template is mandatory in a component.||A Directive doesn’t use View.|
|A component is used to define pipes.||In a directive, it is not possible to define Pipes.|
38) What do you understand by Angular MVVM architecture?
The MVVM architecture or Model-View-ViewModel architecture is a software architectural pattern that provides a facility to developers to separate the development of the graphical user interface (the View) from the development of the business logic or back-end logic (the Model). By using this architecture, the view is not dependent on any specific model platform.
The Angular MVVM architecture consists of the following three parts:
Model: The Model consists of the structure of an entity and specifies the approach. In simple words, we can say that the model contains data of an object.
View: The View is the visual layer of the application. It specifies the structure, layout, and appearance of what a user sees on the screen. It displays the data inside the Model, represents the model, and receives the user’s interaction with the view in the form of mouse clicks, keyboard input, screen tap gestures, etc., and forwards these to the ViewModel via the data binding properties. In Angular terms, the View contains the HTML template of a component.
ViewModel: The ViewModel is an abstract layer of the application. It is used to handle the logic of the application. It also manages the data of a model and displays it in the view. View and ViewModel are connected with two-way data-binding. If you make any changes in the view, the ViewModel takes a note and changes the appropriate data inside the model.