The document summarizes Angular directives including ngIf, ngFor, ngSwitchCase, ngClass, and ngStyle. It describes how ngIf and ngFor are structural directives that change the DOM layout by adding and removing elements. NgIf and ngFor use an asterisk syntax that gets desugared into <ng-template> elements. NgFor iterates over collections and supports additional syntax like trackBy. NgSwitch is a set of cooperating directives that displays different elements based on a switch expression. NgClass and ngStyle are attribute directives that update CSS classes and styles on elements.
Http Service will help us fetch external data, post to it, etc. We need to import the http module to make use of the http service. Let us consider an example to understand how to make use of the http service.
This Edureka "Angular Directives" tutorial will help you to learn about different directives in Angular 2. Below are the topics covered in this tutorial:
1) Why we need Angular Directive?
2) What is Angular Directive?
3) Types of Angular Directive
4) Built-in Angular Directives
5) Working with Custom Angular Directives
Subscribe to our channel to get updates. Check our complete Angular playlist here: https://goo.gl/09KsDC
Angular - Chapter 4 - Data and Event HandlingWebStackAcademy
In Angular , events such as button click or any other sort of events can also be handled very easily. The events get triggered from the html page and are sent across to Angular JS class for further processing.
Data binding is a core concept in Angular and allows to define communication between a component and the DOM, making it very easy to define interactive applications without worrying about pushing and pulling data. There are four forms of data binding and they differ in the way the data is flowing.
Http Service will help us fetch external data, post to it, etc. We need to import the http module to make use of the http service. Let us consider an example to understand how to make use of the http service.
This Edureka "Angular Directives" tutorial will help you to learn about different directives in Angular 2. Below are the topics covered in this tutorial:
1) Why we need Angular Directive?
2) What is Angular Directive?
3) Types of Angular Directive
4) Built-in Angular Directives
5) Working with Custom Angular Directives
Subscribe to our channel to get updates. Check our complete Angular playlist here: https://goo.gl/09KsDC
Angular - Chapter 4 - Data and Event HandlingWebStackAcademy
In Angular , events such as button click or any other sort of events can also be handled very easily. The events get triggered from the html page and are sent across to Angular JS class for further processing.
Data binding is a core concept in Angular and allows to define communication between a component and the DOM, making it very easy to define interactive applications without worrying about pushing and pulling data. There are four forms of data binding and they differ in the way the data is flowing.
A directive is a custom HTML element that is used to extend the power of HTML. Angular 2 has the following directives that get called as part of the BrowserModule module.
ngif
ngFor
If you view the app.module.ts file, you will see the following code and the BrowserModule module defined. By defining this module, you will have access to the 2 directives.
Slides from my latest talk (and videos) about Angular dependency
injection, You can find related videos here: https://www.youtube.com/playlist?list=PLfZsWIHsTcftJl7WlidsXSBAHBXQBR4j2
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.
The session will provide the knowledge about react page life cycle and how more precise actions or operations can be performed using react hooks concepts
This year ECMA International will be ratifying the biggest update to the JavaScript language in its history. In this talk we'll look at key features already appearing in browsers as well as those coming in the near future. We'll also explore how you can begin leveraging the power of ES6 across all browsers today. If you haven't looked at JavaScript recently, you soon realize that a bigger, better world awaits.
A directive is a custom HTML element that is used to extend the power of HTML. Angular 2 has the following directives that get called as part of the BrowserModule module.
ngif
ngFor
If you view the app.module.ts file, you will see the following code and the BrowserModule module defined. By defining this module, you will have access to the 2 directives.
Slides from my latest talk (and videos) about Angular dependency
injection, You can find related videos here: https://www.youtube.com/playlist?list=PLfZsWIHsTcftJl7WlidsXSBAHBXQBR4j2
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.
The session will provide the knowledge about react page life cycle and how more precise actions or operations can be performed using react hooks concepts
This year ECMA International will be ratifying the biggest update to the JavaScript language in its history. In this talk we'll look at key features already appearing in browsers as well as those coming in the near future. We'll also explore how you can begin leveraging the power of ES6 across all browsers today. If you haven't looked at JavaScript recently, you soon realize that a bigger, better world awaits.
A complete crash course with 7 pratical labs, to have a head start developing single page applications with Angular. It also contains advanced topics, like Transclusion, Directive to directive communication and UI Router.
High Quality presentation: https://goo.gl/3OwQXf
Download Labs: https://goo.gl/cVI6De
AngularJS Directives provide a powerful way to extend HTML and add your own custom components into Web applications. In this talk Dan Wahlin walks through the key building blocks in directives and explains how you can get started building your own custom directives using Directive Definition Objects (DDOs), isolate scope, the link() function, controllers, templates and more.
This talk is based on the Building AngularJS Custom Directives video course available at https://www.udemy.com/angularjs-custom-directives.
List of few AngularJS recommended/best practices that can help to write clean, robust and maintainable SPA applications. It was presented at JUG Stockholm Sweden.
Agenda:
1. AngularJS Best Practice # 1: File Organization
2. AngularJS Best Practice # 2: Cross Component Communication
3. AngularJS Best Practice # 3: Scopes
4. AngularJS Best Practice # 4: Named Functions
5. AngularJS Best Practice # 5: Keep Controllers Focused
Presented by Rasheed (http://se.linkedin.com/pub/rasheed-waraich/46/113/72/) Co-founder Aurora Solutions (http://home.aurorasolutions.org/) & FixTelligent (www.fixtelligent.com)
An introduction to AngularJS architecture and usage, equipped with an overview of AngularJS role in solving the problems arised along the history of web development.
For further material and updates:
http://blog.avirancohen.com
Angular or Backbone, which one you will use in your mobile app? How could you develop a mobile app across iOS, Android or windows devices? This talk will take an intimate look at two of today’s most popular frameworks, Angular and Backbone and explore their differences. We’ll show how Apache Cordova opens the world of mobile app development to web developers. In the session, we will demonstrate a “To Do” app using Angular and Backbone, with access to native device capabilities. We’ll compare the frameworks when transported to the world of mobile app development. Along the way, you'll also learn what kind of apps are best-suited for the hybrid architecture and when to make the switch from web app to mobile app.
Angular is considered as one of the most popular software development instruments today. Many custom Angular software development companies are seeing positive results after adopting Angular and the popularity of Angular with compared to other technologies is far high throughout 2019 and might be rise in 2020 as well as per the current trend.
"This article originally appeared in iFour Technolab Blog."
This document also gives a source link.
iFour Technolab is a Microsoft Gold certified custom software, product and Add-in development company with offices in USA, Netherlands, Australia and India.
We have helped small and big enterprises in realizing their need to simplify their businesses through sustainable IT solutions. We use .NET, Angular, Xamarin, .NET Core, WPF, Node.js, React.js, Java, VSTO, Salesforce, and other advanced technologies. We have developed products for Fortune 500 companies and have touched the lives of millions of industry professionals in the Healthcare, Fleet, Aviation, Education, Finance, Construction, Logistics, Entertainment and Environment sectors. One of our projects was for the Netherlands Government Municipality, where we simplified the old-age care policy using technology-based solutions.
IoT refers to the network of connected devices and the technology that facilitates communication between devices and the cloud.
Azure IoT is a powerful tool that enables organizations to deploy, manage and scale IoT solutions.
With this you have a bi-directional, trustworthy communication setup, and security is the number one priority of this configuration.
IoT makes virtually everything “smart,” by improving aspects of our life with the power of data collection, AI algorithms, and networks. The goal of IoT is to extend internet connectivity to "dumb" devices like toasters and turn them into "smart" devices. Such devices are basically lazy as a standard device needs to be switched on but as Frank B. Gilbreth Sr once said, “I will always choose a lazy person to do a difficult job because a lazy person will find an easy way to do it.” We now have smart kitchen, smart vacuums and etc.
NFTs are the talk of the town these days. Many of us feel left out when others are talking about NFTs. Let’s shed some light on them. This is the opportunity for you to understand the know-how of NFTs. Do attend our meetup for a detailed understanding of the NFTs for the marketplace.
WPF, which stands for Windows Presentation Foundation, is Microsoft's latest approach to a GUI framework, used with the .NET framework. It is a powerful framework for building Windows applications. WPF contains features that will help you develop rich Windows applications.
iFour Technolab is a custom software development and software consulting firm in India which has experienced developers of ASP.Net development to increase their business growth and sustainability for small and large enterprises across the globe. We stand as a technology partner which accelerates client growth by means of providing key technology solutions, based on a variety of industry or domain experiences & operations.
Vue.js is an open-source JavaScript framework to build user interfaces and single-page applications. It is one of the famous frameworks used to simplify web development to easily integrate into big projects without any issues.
Basic Introduction of VSTO Office Add-in Software Development - iFour TechnolabiFour Technolab Pvt. Ltd.
VSTO stands for Visual Studio Tools for Office. This tutorial is about basic introduction of VSTO office add-in software development created by iFour Technolab Pvt. Ltd. VSTO has an extend features of the application, and customize the user interface (UI) of the application.
Blockchain in Legal Industry improves approval waiting time and resources for patents & trademarks handling and creates a record of peer-to-peer transactions without the need for a trusted authority. 40% of legal departments utilize automated contract management tools and tamper-proof and legally unassailable agreements based on smart contract technology.
Information technology helps healthcare organizations in providing better services to patients and making better decisions. Some of the technologies like e-prescriptions, electronic transactions, and electronic medical records help in increasing the business functionality, removes data ambiguities, reduces the time of staff and physicians and enhances the relationship between the organization and patients. IT provides the ability to measure and monitor patients’ health and provides better analytics to physicians.
Blockchain Use Cases in Financial Services Industry - iFour Technolab Pvt. Ltd.iFour Technolab Pvt. Ltd.
This blockchain Encryption technology can help reduce overall cyber frauds with 24 x 7 service that can be offered by banks. It allows financial institutions to create direct links internally and used a common database to keep track of the execution. The main feature is that transaction clearance and settlement without a central database in between.
NPM is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js. It consists of a command line client, also called npm, and an online database of public and paid-for private packages, called the npm registry.
The Node.js file system module allows you to work with the file system on your computer. Node.js gives the functionality of File I/O by providing wrappers around the standard POSIX functions. In Node.js, File I/O methods can be performed in both synchronous as well as asynchronous form depending upon the user requirements.
MongoDB is a scalable high-performance open-source document-orientated database which is built for speed, rich document based queries for easy readability, full index support for high performance, replication and failover for high availability, auto sharding for easy scalability and map/reduce for aggregation.
Windows Presentation Foundation (WPF) allows developers to easily build and create visually enriched UI based applications. The classical UI elements or controls in other UI frameworks are also enhanced in WPF applications.
Agile project management is more about empowerment. Agile projects are not lead by individual like project manager. Agile project management is a combination of art and science both where you should be well versed with the principals of the project management. At the same time you should be practical while taking decision and understanding circumstances.
This tutorial includes topics like fundamentals of the agile development approach, agile development life cycle, agile requirements development, agile planning, agile design, agile construction & agile project management.
What is the TDS Return Filing Due Date for FY 2024-25.pdfseoforlegalpillers
It is crucial for the taxpayers to understand about the TDS Return Filing Due Date, so that they can fulfill your TDS obligations efficiently. Taxpayers can avoid penalties by sticking to the deadlines and by accurate filing of TDS. Timely filing of TDS will make sure about the availability of tax credits. You can also seek the professional guidance of experts like Legal Pillers for timely filing of the TDS Return.
[Note: This is a partial preview. To download this presentation, visit:
https://www.oeconsulting.com.sg/training-presentations]
Sustainability has become an increasingly critical topic as the world recognizes the need to protect our planet and its resources for future generations. Sustainability means meeting our current needs without compromising the ability of future generations to meet theirs. It involves long-term planning and consideration of the consequences of our actions. The goal is to create strategies that ensure the long-term viability of People, Planet, and Profit.
Leading companies such as Nike, Toyota, and Siemens are prioritizing sustainable innovation in their business models, setting an example for others to follow. In this Sustainability training presentation, you will learn key concepts, principles, and practices of sustainability applicable across industries. This training aims to create awareness and educate employees, senior executives, consultants, and other key stakeholders, including investors, policymakers, and supply chain partners, on the importance and implementation of sustainability.
LEARNING OBJECTIVES
1. Develop a comprehensive understanding of the fundamental principles and concepts that form the foundation of sustainability within corporate environments.
2. Explore the sustainability implementation model, focusing on effective measures and reporting strategies to track and communicate sustainability efforts.
3. Identify and define best practices and critical success factors essential for achieving sustainability goals within organizations.
CONTENTS
1. Introduction and Key Concepts of Sustainability
2. Principles and Practices of Sustainability
3. Measures and Reporting in Sustainability
4. Sustainability Implementation & Best Practices
To download the complete presentation, visit: https://www.oeconsulting.com.sg/training-presentations
Enterprise Excellence is Inclusive Excellence.pdfKaiNexus
Enterprise excellence and inclusive excellence are closely linked, and real-world challenges have shown that both are essential to the success of any organization. To achieve enterprise excellence, organizations must focus on improving their operations and processes while creating an inclusive environment that engages everyone. In this interactive session, the facilitator will highlight commonly established business practices and how they limit our ability to engage everyone every day. More importantly, though, participants will likely gain increased awareness of what we can do differently to maximize enterprise excellence through deliberate inclusion.
What is Enterprise Excellence?
Enterprise Excellence is a holistic approach that's aimed at achieving world-class performance across all aspects of the organization.
What might I learn?
A way to engage all in creating Inclusive Excellence. Lessons from the US military and their parallels to the story of Harry Potter. How belt systems and CI teams can destroy inclusive practices. How leadership language invites people to the party. There are three things leaders can do to engage everyone every day: maximizing psychological safety to create environments where folks learn, contribute, and challenge the status quo.
Who might benefit? Anyone and everyone leading folks from the shop floor to top floor.
Dr. William Harvey is a seasoned Operations Leader with extensive experience in chemical processing, manufacturing, and operations management. At Michelman, he currently oversees multiple sites, leading teams in strategic planning and coaching/practicing continuous improvement. William is set to start his eighth year of teaching at the University of Cincinnati where he teaches marketing, finance, and management. William holds various certifications in change management, quality, leadership, operational excellence, team building, and DiSC, among others.
Attending a job Interview for B1 and B2 Englsih learnersErika906060
It is a sample of an interview for a business english class for pre-intermediate and intermediate english students with emphasis on the speking ability.
Digital Transformation and IT Strategy Toolkit and TemplatesAurelien Domont, MBA
This Digital Transformation and IT Strategy Toolkit was created by ex-McKinsey, Deloitte and BCG Management Consultants, after more than 5,000 hours of work. It is considered the world's best & most comprehensive Digital Transformation and IT Strategy Toolkit. It includes all the Frameworks, Best Practices & Templates required to successfully undertake the Digital Transformation of your organization and define a robust IT Strategy.
Editable Toolkit to help you reuse our content: 700 Powerpoint slides | 35 Excel sheets | 84 minutes of Video training
This PowerPoint presentation is only a small preview of our Toolkits. For more details, visit www.domontconsulting.com
Kseniya Leshchenko: Shared development support service model as the way to ma...Lviv Startup Club
Kseniya Leshchenko: Shared development support service model as the way to make small projects with small budgets profitable for the company (UA)
Kyiv PMDay 2024 Summer
Website – www.pmday.org
Youtube – https://www.youtube.com/startuplviv
FB – https://www.facebook.com/pmdayconference
VAT Registration Outlined In UAE: Benefits and Requirementsuae taxgpt
Vat Registration is a legal obligation for businesses meeting the threshold requirement, helping companies avoid fines and ramifications. Contact now!
https://viralsocialtrends.com/vat-registration-outlined-in-uae/
Skye Residences | Extended Stay Residences Near Toronto Airportmarketingjdass
Experience unparalleled EXTENDED STAY and comfort at Skye Residences located just minutes from Toronto Airport. Discover sophisticated accommodations tailored for discerning travelers.
Website Link :
https://skyeresidences.com/
https://skyeresidences.com/about-us/
https://skyeresidences.com/gallery/
https://skyeresidences.com/rooms/
https://skyeresidences.com/near-by-attractions/
https://skyeresidences.com/commute/
https://skyeresidences.com/contact/
https://skyeresidences.com/queen-suite-with-sofa-bed/
https://skyeresidences.com/queen-suite-with-sofa-bed-and-balcony/
https://skyeresidences.com/queen-suite-with-sofa-bed-accessible/
https://skyeresidences.com/2-bedroom-deluxe-queen-suite-with-sofa-bed/
https://skyeresidences.com/2-bedroom-deluxe-king-queen-suite-with-sofa-bed/
https://skyeresidences.com/2-bedroom-deluxe-queen-suite-with-sofa-bed-accessible/
#Skye Residences Etobicoke, #Skye Residences Near Toronto Airport, #Skye Residences Toronto, #Skye Hotel Toronto, #Skye Hotel Near Toronto Airport, #Hotel Near Toronto Airport, #Near Toronto Airport Accommodation, #Suites Near Toronto Airport, #Etobicoke Suites Near Airport, #Hotel Near Toronto Pearson International Airport, #Toronto Airport Suite Rentals, #Pearson Airport Hotel Suites
"𝑩𝑬𝑮𝑼𝑵 𝑾𝑰𝑻𝑯 𝑻𝑱 𝑰𝑺 𝑯𝑨𝑳𝑭 𝑫𝑶𝑵𝑬"
𝐓𝐉 𝐂𝐨𝐦𝐬 (𝐓𝐉 𝐂𝐨𝐦𝐦𝐮𝐧𝐢𝐜𝐚𝐭𝐢𝐨𝐧𝐬) is a professional event agency that includes experts in the event-organizing market in Vietnam, Korea, and ASEAN countries. We provide unlimited types of events from Music concerts, Fan meetings, and Culture festivals to Corporate events, Internal company events, Golf tournaments, MICE events, and Exhibitions.
𝐓𝐉 𝐂𝐨𝐦𝐬 provides unlimited package services including such as Event organizing, Event planning, Event production, Manpower, PR marketing, Design 2D/3D, VIP protocols, Interpreter agency, etc.
Sports events - Golf competitions/billiards competitions/company sports events: dynamic and challenging
⭐ 𝐅𝐞𝐚𝐭𝐮𝐫𝐞𝐝 𝐩𝐫𝐨𝐣𝐞𝐜𝐭𝐬:
➢ 2024 BAEKHYUN [Lonsdaleite] IN HO CHI MINH
➢ SUPER JUNIOR-L.S.S. THE SHOW : Th3ee Guys in HO CHI MINH
➢FreenBecky 1st Fan Meeting in Vietnam
➢CHILDREN ART EXHIBITION 2024: BEYOND BARRIERS
➢ WOW K-Music Festival 2023
➢ Winner [CROSS] Tour in HCM
➢ Super Show 9 in HCM with Super Junior
➢ HCMC - Gyeongsangbuk-do Culture and Tourism Festival
➢ Korean Vietnam Partnership - Fair with LG
➢ Korean President visits Samsung Electronics R&D Center
➢ Vietnam Food Expo with Lotte Wellfood
"𝐄𝐯𝐞𝐫𝐲 𝐞𝐯𝐞𝐧𝐭 𝐢𝐬 𝐚 𝐬𝐭𝐨𝐫𝐲, 𝐚 𝐬𝐩𝐞𝐜𝐢𝐚𝐥 𝐣𝐨𝐮𝐫𝐧𝐞𝐲. 𝐖𝐞 𝐚𝐥𝐰𝐚𝐲𝐬 𝐛𝐞𝐥𝐢𝐞𝐯𝐞 𝐭𝐡𝐚𝐭 𝐬𝐡𝐨𝐫𝐭𝐥𝐲 𝐲𝐨𝐮 𝐰𝐢𝐥𝐥 𝐛𝐞 𝐚 𝐩𝐚𝐫𝐭 𝐨𝐟 𝐨𝐮𝐫 𝐬𝐭𝐨𝐫𝐢𝐞𝐬."
Falcon stands out as a top-tier P2P Invoice Discounting platform in India, bridging esteemed blue-chip companies and eager investors. Our goal is to transform the investment landscape in India by establishing a comprehensive destination for borrowers and investors with diverse profiles and needs, all while minimizing risk. What sets Falcon apart is the elimination of intermediaries such as commercial banks and depository institutions, allowing investors to enjoy higher yields.
Unveiling the Secrets How Does Generative AI Work.pdfSam H
At its core, generative artificial intelligence relies on the concept of generative models, which serve as engines that churn out entirely new data resembling their training data. It is like a sculptor who has studied so many forms found in nature and then uses this knowledge to create sculptures from his imagination that have never been seen before anywhere else. If taken to cyberspace, gans work almost the same way.
2. Index
❏ Introduction
❏ ngIf
❏ ngFor
❏ ngFor and Trackby
❏ ngSwitchCase
❏ ngClass
❏ ngStyle
https://www.ifourtechnolab.com/
3. Introduction
❏ There are three kinds of directives in Angular:
❖ Components— directives with a template.
❖ Structural directives— change the DOM layout by adding and removing DOM elements.
❖ Attribute directives— change the appearance or behavior of an element, component, or another
directive.
❏ Structural Directives change the structure of the view. Two examples are NgFor and NgIf.
❏ Structural directives are easy to recognize. An asterisk (*) precedes the directive attribute name as in
this.
❏ Attribute directives are used as attributes of elements. The built-in NgStyle directive in the Template
Syntax guide, for example, can change several element styles at the same time.
https://www.ifourtechnolab.com/
4. NgIf
❏ <div *ngIf="hero" class="name">{{hero.name}}</div>
❏ No brackets. No parentheses. Just *ngIf set to a string.
❏ The asterisk (*) is a convenience notation and the string is a micro syntax rather than the usual template
expression.
❏ Render to
<ng-template [ngIf]="hero">
<div class="name">{{hero.name}}</div>
</ng-template>
❏ Angular desugars this notation into a marked-up <ng-template> that surrounds the host element and its
descendents. Each structural directive does something different with that template.
❏ Three of the common, built-in structural directives—NgIf, NgFor, and NgSwitch...—are described in the
Template
https://www.ifourtechnolab.com/
5. NgFor
<ul>
<li *ngFor="let hero of heroes">{{hero.name}}</li>
</ul>
Ref -> https://blog.angular-university.io/angular-2-ngfor/
❏ Angular transforms the *ngFor in similar fashion from asterisk (*) syntax to <ng-template> element.
<div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">
({{i}}) {{hero.name}}
</div>
<ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById">
<div [class.odd]="odd">({{i}}) {{hero.name}}</div>
</ng-template>
Angular transforms the *ngFor in similar fashion from asterisk (*) syntax to <ng-template> element.
<div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">
({{i}}) {{hero.name}}
</div>
<ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById">
<div [class.odd]="odd">({{i}}) {{hero.name}}</div>
</ng-template>
https://www.ifourtechnolab.com/
6. NgSwitch
❏ The Angular NgSwitch is actually a set of cooperating directives:
a. NgSwitch,
b. NgSwitchCase, and
c. NgSwitchDefault.
https://www.ifourtechnolab.com/
7. NgSwitch
❏ The Angular NgSwitch is actually a set of cooperating directives:
a. NgSwitch,
b. NgSwitchCase, and
c. NgSwitchDefault.
<ul [ngSwitch]="person.country">
<li *ngSwitchCase="'UK'" class="text-success">
{{ person.name }} ({{ person.country }})
</li>
<li *ngSwitchCase="'USA'" class="text-primary">
{{ person.name }} ({{ person.country }})
</li>
<li *ngSwitchDefault class="text-warning">
{{ person.name }} ({{ person.country }})
</li>
</ul>
https://www.ifourtechnolab.com/
8. NgClass
❏ Adds and removes CSS classes on an HTML element.
❏ The CSS classes are updated as follows, depending on the type of the expression evaluation:
a. string - the CSS classes listed in the string (space delimited) are added,
b. Array - the CSS classes declared as Array elements are added,
c. Object - keys are CSS classes that get added when the expression given in the value evaluates to a
truthy value, otherwise they are removed.
<some-element [ngClass]="'first second'">...</some-element>
<some-element [ngClass]="['first', 'second']">...</some-element>
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
<some-element [ngClass]="string: Exp|array: Exp|obj: Exp">...</some-element>
<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>
https://www.ifourtechnolab.com/
9. NgStyle
❏ An attribute directive that updates styles for the containing HTML element.
❏ Sets one or more style properties, specified as colon-separated key-value pairs.
❏ The key is a style name, with an optional .
❏ <unit> suffix (such as 'top.px', 'font-style.em').
❏ The value is an expression to be evaluated.
❏ The resulting non-null value, expressed in the given unit, is assigned to the given style property.
❏ If the result of evaluation is null, the corresponding style is removed.
<some-element [ngStyle]="{'font-style': styleExp}">...</some-element>
<some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element>
<some-element [ngStyle]="objExp">...</some-element>
https://www.ifourtechnolab.com/