Skip to main content

What is Component in angular

Components define views, which are sets of screen elements that angular can choose among and modify according to your program logic and data.
Component are simply classes, with decorator that mark their type and provide metadata that tells angular how to use them.

  • The metadata for a component class associates it with a template that defines a view. A template combines ordinary HTML with angular directives and bind markup that allow angular to modify the HTML before rendering it for display.
So in simple terms a component in Angular is composed of these 3 things
Template - Defines the user interface. Contains the HTML, directives and bindings.
Class - Contains the code required for template. Just like a class in any object oriented programming language like C# or Java, a class in angular can contain methods and properties. Properties contain the data that we want to display in the view template and methods contain the logic for the view. We use TypeScript to create the class.
Decorator - We use the Component decorator provided by Angular to add metadata to the class. A class becomes an Angular component, when it is decorated with the Component decorator.

Comments

Post a Comment

Popular posts from this blog

Default Parameters

Default Parameters A JavaScript function can have default parameter values. Using default function parameters, you can initialize formal parameters with default values. If you do not initialize a parameter with some value, then the default value of the parameter is undefined. Example 1 Without passing argument value function Hello(name) { console.log('Value Of Name parameter = ' + name ) } Hello(); Output Value Of Name parameter = undefined Example 2 passing argument value function Hello(name) { console.log('Value Of Name parameter = ' + name ) } Hello("Hello"); Output Value Of Name parameter = Hello Example 1 With Set Parameters Default vlaue // Add Name parameter default value is 'Hello World' check below function Hello( name='Hello World' ) { console.log('Value Of Name parameter = ' + name ) } // Calling without passing arguments show the default value Hello(); Output Value Of Name ...
Post a Comment
Read more

JavaScript Codes

Javascript Codes Use this for Add Class on menu links using Javascript (function(){ var el = document.querySelectorAll('.custom-menu-primary a') el.forEach(function(e){ e.classList = e.textContent.toLowerCase().replace(/[^a-zA-Z0-9\.-]+/g,""); }) })(); Add Class on Scroll using Varible Height (function() { let _body = document.getElementsByTagName('body'); window.addEventListener('scroll', function() { _top = window.scrollY; if (_top > 100) { _body[0].classList.add("fadIn"); } else { _body[0].classList.remove("fadIn") } }); })(); Add Class on Scroll using Varible Height (function() { let _body = document.getElementsByTagName('body'); let herderHeight = document.querySelector('.header-container-wrapper...
Post a Comment
Read more