Home
Search results “Angular apply style if”
Angular 2 Class & Style Binding Tutorial
 
11:36
Build a Full App in Angular 2: https://goo.gl/tfWZDT Learn Angular 2 Fundamentals Course (Free): https://coursetro.com/courses/8/Learn-Angular-2-Development-with-our-Free-Course We're going to learn how to dynamically control CSS classes and inline CSS styles with Angular 2. We'll also take a look at ngStyle and ngClass for controlling multiple CSS classes and inline style properties. Written tutorial: https://coursetro.com/posts/code/24/Angular-2-Class-&-Style-Binding-Tutorial - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS weekly! My site: https://coursetro.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Coursetro.com. Come to my discord server or add me on social media and say Hi!
Views: 21407 DesignCourse
Style binding in angular 2
 
07:10
Text version of the video http://csharp-video-tutorials.blogspot.com/2017/06/style-binding-in-angular-2.html Slides http://csharp-video-tutorials.blogspot.com/2017/06/style-binding-in-angular-2_29.html Angular 2 Tutorial playlist https://www.youtube.com/playlist?list=PL6n9fhu94yhWqGD8BuKuX-VTKqlNBj-m6 Angular 2 Text articles and slides http://csharp-video-tutorials.blogspot.com/2017/06/angular-2-tutorial-for-beginners_12.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists In this video we will discuss Style binding in Angular with examples. Setting inline styles with style binding is very similar to setting CSS classes with class binding. Please wtach Class binding video from Angular 2 tutorial before proceeding with this video. Notice in the example below, we have set the font color of the button using the style attribute. import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` [button style="color:red"]My Button[/button] ` }) export class AppComponent { } The following example sets a single style (font-weight). If the property 'isBold' is true, then font-weight style is set to bold else normal. import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` [button style='color:red' [style.font-weight]="isBold ? 'bold' : 'normal'"]My Button [/button] ` }) export class AppComponent { isBold: boolean = true; } style property name can be written in either dash-case or camelCase. For example, font-weight style can also be written using camel case - fontWeight. Some styles like font-size have a unit extension. To set font-size in pixels use the following syntax. This example sets font-size to 30 pixels. import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` [button style='color:red' [style.font-size.px]="fontSize"]My Button [/button] ` }) export class AppComponent { fontSize: number = 30; } To set multiple inline styles use NgStyle directive 1. Notice the color style is added using the style attribute 2. ngStyle is binded to addStyles() method of the AppComponent class 3. addStyles() method returns an object with 2 key/value pairs. The key is a style name, and the value is a value for the respective style property or an expression that returns the style value. 4. let is a new type of variable declaration in JavaScript. 5. let is similar to var in some respects but allows us to avoid some of the common “gotchas” that we run into when using var. 6. The differences between let and var are beyond the scope of this video. For our example, var also works fine. 7. As TypeScript is a superset of JavaScript, it supports let import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` [button style='color:red' [ngStyle]="addStyles()"]My Button[/button] ` }) export class AppComponent { isBold: boolean = true; fontSize: number = 30; isItalic: boolean = true; addStyles() { let styles = { 'font-weight': this.isBold ? 'bold' : 'normal', 'font-style': this.isItalic ? 'italic' : 'normal', 'font-size.px': this.fontSize }; return styles; } }
Views: 72709 kudvenkat
AngularJS For Everyone Tutorial #8 - Conditional Classes With ngClass
 
10:32
Here we show you how to set classes conditionally in AngularJS. Subscribe for more free tutorials https://goo.gl/6ljoFc, more Angular Tutorials: https://goo.gl/vFi0CQ https://docs.angularjs.org/api/ng/filter Support Free Tutorials https://www.leveluptutorials.com/store/ The best shared web hosting http://www.bluehost.com/track/leveluptutorials/ Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro Subscribe to the Level Up Newsletter http://eepurl.com/AWjGz To Support Level Up Tuts: http://leveluptuts.com/donations Simple cloud hosting, built for developers.: https://www.digitalocean.com/?refcode=67357174b09e HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
Views: 21228 LevelUpTuts
Angular 4 QuickStart Tutorial - Angular 4 Directives  (ngFor, ngif , ngClass, ngStyle )
 
10:29
In this angular 4 tutorial series we will be creating a new project using the angular 4 cli , show you an ngfor example by listing an array, and i will hide the array using ngif also we will take a look on ngclass and ngstyle, today it will be quick look into angular directives We will be using different structural directives in Angular 4 like ngIF, ngFor also we will be using attributes and property bind it like ngClass and ngStyle attributes. Structural and attribute directives which will be discussed in this tutorial: ngFor example as an angular list directive ngIf example ngClass ngStyle For each directive we will have in this tutorial an example: ngIf angular example, ngFor example, ngClass and ngStyle angular example.
Views: 8781 dotsway
AngularJS: ng-if, ng-repeat, ng-show, ng-hide and Bootstrap CSS framework integration
 
53:00
Covers the following: -How to do a simple search for records using AJAX together with AngularJS -How to integrate Bootstrap CSS framework as part of AnguarJS application -How to use ng-if, ng-show and ng-hide -Differences between ng-if and ng-show/ng-hide -How to work with ng-repeat -How to display multiple records using ng-repeat -How to fetch multiple rows through AJAX and bind using ng-repeat -How to make using ng-if/ng-show inside ng-repeat -Inspect various scope object when dealing with ng-if and ng-show Source code: http://www.techcbt.com/Post/354/Angular-JS-basics/how-to-work-with-ng-if-ng-repeat-bootstrap-in-angular-js
Views: 38233 Tech CBT
Angular Material Custom Theme Tutorial
 
12:31
Angular Material is pretty powerful out of the box. But sometimes you want your own styles instead of the themes built into Angular Material. In this video, you'll learn how to quickly build your own theme. ---------- Build a complete Angular App with Angular Material, Angularfire, NgRx & More: https://www.udemy.com/angular-full-app-with-angular-material-angularfire-ngrx/?couponCode=ACAD_M Further Resources (incl. Link to Code): https://www.academind.com/learn/angular/angular-material-a-thorough-guide/custom-theme Want to learn something totally different? Check out all other courses: https://academind.com/learn/our-courses ---------- • You can follow Max on Twitter (@maxedapps). • And you should of course also follow @academind_real. • You can also find us on Facebook.(https://www.facebook.com/academindchannel/) • Or visit our Website (https://www.academind.com) and subscribe to our newsletter! See you in the videos! ---------- Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!
Views: 23583 Academind
Styling angular 2 components
 
11:18
Text version of the video http://csharp-video-tutorials.blogspot.com/2017/06/styling-angular-2-components.html Slides http://csharp-video-tutorials.blogspot.com/2017/06/styling-angular-2-components_13.html Angular 2 Tutorial playlist https://www.youtube.com/playlist?list=PL6n9fhu94yhWqGD8BuKuX-VTKqlNBj-m6 Angular 2 Text articles and slides http://csharp-video-tutorials.blogspot.com/2017/06/angular-2-tutorial-for-beginners_12.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists In this video we will discuss the different options available to apply styles to Angular Components. The following are the different options available to style this "employee component" Option 1: Specify the following table and td styles in external stylesheet - styles.css table { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: large; border-collapse: collapse; } td { border: 1px solid black; } Advantages : 1. Visual Studio editor features (Intellisense, Code completion & formatting) are available. 2. Application maintenance is also easy as we only have to change the styles in one place if we need to change them for any reason. Disadvantages : 1. The Stylesheet that contains the styles must be referenced for the component to be reused. 2. Since styles.css is referenced in index.html page, these styles may affect the table and td elements in other components, and you may or may not want this behaviour. Option 2 : Specify the styles inline in the component HTML file as shown below. [table style="color: #369;font-family: Arial, Helvetica, sans-serif; font-size:large;border-collapse: collapse;"] [tr] [td style="border: 1px solid black;"]First Name[/td] [td style="border: 1px solid black;"]{{firstName}}[/td] [/tr] [tr] [td style="border: 1px solid black;"]Last Name[/td] [td style="border: 1px solid black;"]{{lastName}}[/td] [/tr] [tr] [td style="border: 1px solid black;"]Gender[/td] [td style="border: 1px solid black;"]{{gender}}[/td] [/tr] [tr] [td style="border: 1px solid black;"]Age[/td] [td style="border: 1px solid black;"]{{age}}[/td] [/tr] [/table] Advantages : 1. Visual Studio editor features (Intellisense, Code completion & formatting) are available. 2. Component can be easily reused as the styles are defined inline 3. Styles specified using this approach are local to the component and don't collide with styles used elsewhere in the application. Disadvantages : 1. Application maintenance is difficult. For example, if we want to change the [td] border colour to red we have to change it in several places. Option 3 : Specify the styles in the component html file using [style] tag as shown below [style] table { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: large; border-collapse: collapse; } td { border: 1px solid black; } [/style] [table] [tr] [td]First Name[/td] [td]{{firstName}}[/td] [/tr] [tr] [td]Last Name[/td] [td]{{lastName}}[/td] [/tr] [tr] [td]Gender[/td] [td]{{gender}}[/td] [/tr] [tr] [td]Age[/td] [td]{{age}}[/td] [/tr] [/table] Advantages : 1. Component can be easily reused as the styles are defined inline with in the component itself 2. Application maintenance is also easy as we only have to change the styles in one place 3. Visual Studio editor features (Intellisense, Code completion & formatting) are available 4. Styles specified using this approach are local to the component and don't collide with styles used elsewhere in the application. Option 4 : Specify the styles in the component TypeScript file using the @component decorator styles property as shown below. Notice the styles property takes an array of strings containing your styles.
Views: 123731 kudvenkat
Customizing Angular 5 Material Themes
 
17:14
Written tutorial: https://goo.gl/wp5vqZ My UI Design Course: https://goo.gl/E6KWDg Angular 5 Material Tutorial: https://www.youtube.com/watch?v=2osMpXOe5fA Learn how to create custom Angular 5 Material themes in this tutorial. https://coursetro.com http://facebook.com/coursetro - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS weekly! My site: https://coursetro.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Coursetro.com. Come to my discord server or add me on social media and say Hi!
Views: 24557 DesignCourse
💥 Angular Component Styling - Watch Component Style Isolation In Action, Learn How It Works
 
06:26
This video is part of the Angular Library Laboratory Course - https://angular-university.io/course/angular-advanced-course?utm=yt-ll-1-c&grpp=t&couponCode=ANGULAR_LIB_LAB_YOUTUBE One of the topics that we will come across while designing third-party libraries is style isolation. Very often while developing applications we tend to use simply plain CSS, which works great especially if we are using a third party library like Bootstrap. But if we want to ship components to other applications, we can make our components much more reusable and easy to deploy if we isolate some of the styles of the component. For example the more structural styles of the component, such as for example the way the component internal elements are positioned internally: those are great candidates for style isolation. For more videos tutorials on Angular, check the Angular University website - https://angular-university.io Follow us: Twitter - https://twitter.com/AngularUniv Google+ - https://plus.google.com/u/1/113731658724752465218 Facebook - https://www.facebook.com/angular.university Check out the PDF E-Books available at the Angular University - https://angular-university.io/my-ebooks
Views: 11039 Angular University
Angular 4 Tutorial 8: *ngIf and ng-template
 
07:57
Learn what *ngIf is and how to make use of it to dynamically toggle ng-template stuff. Full Angular 4 Playlist: https://www.youtube.com/playlist?list=PLYxzS__5yYQmi8f94KAGx1ofwFIn-FLNt codedamn is a now free platform for developers to learn and establish their credibility. Ready to be among developers? Register now! https://codedamn.com
Views: 33395 codedamn
Angular 5 Tutorial in Hindi #10: Style Binding in  Angular 5 in Hindi
 
09:54
Welcome all, we will see style binding angular 5 in Hindi. Angular 5 style binding in Hindi. When you need to apply dynamic styles to a HTML element using Angular, now to do this we will use the regular style or class HTML attributes along with Angular data-bindings. Don't Forget to Follow me on all Social Network, Instagram Link: https://www.instagram.com/vinodthapa55 Facebook Link: https://www.facebook.com/vinodthapa55 Twitter Link: https://twitter.com/vb55thapa Facebook ThapaTechnical Page Link: https://www.facebook.com/vinodbahadur...
Views: 2079 Thapa Technical
Angular 6 Basics 17 - Handling click events
 
07:22
Access the full course here: https://javabrains.io/courses/angular_basics We'll now implement some interactivity by adding a button and having its click event trigger showing and hiding of a div. You'll learn how to wire in member methods to be executed on user events and how you can affect component state with them. Angular 6 Basics - Learn how to create Angular applications from scratch. Understand the Angular framework and learn how to use the features of the framework to create components and services. Use modules to organize your code. Build applications that call REST APIs and fetch data from a server. Implement routing to show multiple views with multiple URLs. This course requires no previous knowledge of Angular or AngularJS.
Views: 33862 Java Brains
Angular 7 Tutorial - 7 - Class Binding
 
06:26
Support - https://www.paypal.me/Codevolution Facebook - https://www.facebook.com/codevolutionweb Github - https://github.com/gopinav Angular | Angular Tutorial for Beginners | Angular Class Binding
Views: 125975 Codevolution
Using Bootstrap with Angular
 
36:32
#1 Online Course: Angular 2 - The Complete Guide (http://codingthesmartway.com/courses/angular2-complete-guide) Premium Angular 2 Bootstrap Theme: http://codingthesmartway.com/themes/creativetim/ Using Bootstrap with Angular Bootstrap is the most popular HTML, CSS, and JavaScript framework for web front-end development. It's great for developing responsive, mobile-first web sites. The Bootstrap framework can be used together with modern JavaScript web & mobile frameworks like Angular. In the this tutorial you'll learn how to use the Bootstrap framework in your Angular project. Furthermore we'll take a look at the Ng-Bootstrap project which delivers Angular Bootstrap components which can be used out of the box. This is a CodingTheSmartWay.com tutorial Support us with just one cup of coffee: https://www.buymeacoffee.com/ctsw --------------------- Musik: Night Owl by Broke For Free is licensed under a Creative Commons Attribution License. (http://freemusicarchive.org/music/Broke_For_Free/Directionless_EP/Broke_For_Free_-_Directionless_EP_-_01_Night_Owl) DISCLAIMER: This video and description contains affiliate links, which means that if you click on one of the product links, we’ll receive a small commission. This helps support the channel and allows us to continue to make videos like this. Thank you for the support!
Views: 109160 CodingTheSmartWay.com
If Else Statement In AngularJS Templates [With Example]
 
02:13
Buy Redmi 6 Pro (Gold, 32GB) - https://amzn.to/2Ntpkv4 Redmi Y2 (Gold, 3GB RAM, 32GB Storage) - https://amzn.to/2BXkNie Redmi 6 Pro (Black, 32GB) - https://amzn.to/2NofTwN Redmi 6 Pro (Gold, 64GB) - https://amzn.to/2BXMJmm Redmi Y2 (Black, 32GB) - https://amzn.to/2NqoHlV OnePlus 6 (Mirror Black, 6GB RAM, 64GB Storage) - https://amzn.to/2NrqtDb Redmi Y2 (Dark Grey, 3GB RAM, 32GB Storage) - https://amzn.to/2BXwvcS Redmi 6 Pro (Black, 64GB) - https://amzn.to/2OauUHV ............................ Please visit http://www.technomark.in/If-Else-Statement-In-AngularJS-Templates.aspx for more information. If Else Statement In AngularJS, If Else Statement In AngularJS Templates, If Else Statement In AngularJS Templates With Example, ng-if directive In AngularJS, AngularJS ng if, Conditional Statement In AngularJS, AngulaJS If Else Statement Templates, HTML, PHP, Asp.Net
Views: 3752 Admin Technomark
Class binding in angular 2
 
11:05
Text version of the video http://csharp-video-tutorials.blogspot.com/2017/06/class-binding-in-angular-2.html Slides http://csharp-video-tutorials.blogspot.com/2017/06/class-binding-in-angular-2_28.html Angular 2 Tutorial playlist https://www.youtube.com/playlist?list=PL6n9fhu94yhWqGD8BuKuX-VTKqlNBj-m6 Angular 2 Text articles and slides http://csharp-video-tutorials.blogspot.com/2017/06/angular-2-tutorial-for-beginners_12.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists In this video we will discuss CSS Class binding in Angular with examples. For the demos in this video, we will use same example we have been working with so far in this video series. In styles.css file include the following 3 CSS classes. If you recollect styles.css is already referenced in our host page - index.html. .boldClass{ font-weight:bold; } .italicsClass{ font-style:italic; } .colorClass{ color:red; } In app.component.ts, include a button element as shown below. Notice we have set the class attribute of the button element to 'colorClass'. import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` [button class='colorClass']My Button[/button] ` }) export class AppComponent { } At this point, run the application and notice that the 'colorClass' is added to the button element as expected. Replace all the existing css classes with one or more classes Modify the code in app.component.ts as shown below. We have introduced a property 'classesToApply' in AppComponent class We have also specified class binding for the button element. The word 'class' is in a pair of square brackets and it is binded to the property 'classesToApply' This will replace the existing css classes of the button with classes specified in the class binding import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` [button class='colorClass' [class]='classesToApply']My Button[/button] ` }) export class AppComponent { classesToApply: string = 'italicsClass boldClass'; } Run the application and notice 'colorClass' is removed and these classes (italicsClass & boldClass) are added. Adding or removing a single class : To add or remove a single class, include the prefix 'class' in a pair of square brackets, followed by a DOT and then the name of the class that you want to add or remove. The following example adds boldClass to the button element. Notice it does not remove the existing colorClass already added using the class attribute. If you change applyBoldClass property to false or remove the property altogether from the AppComponent class, css class boldClass is not added to the button element. import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` [button class='colorClass' [class.boldClass]='applyBoldClass']My Button[/button] ` }) export class AppComponent { applyBoldClass: boolean = true; } With class binding we can also use ! symbol. Notice in the example below applyBoldClass is set to false. Since we have used ! in the class binding the class is added as expected. import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` [button class='colorClass' [class.boldClass]='!applyBoldClass']My Button[/button] ` }) export class AppComponent { applyBoldClass: boolean = false; } You can also removed an existing class that is already applied. Consider the following example. Notice we have 3 classes (colorClass, boldClass & italicsClass) added to the button element using the class attribute. The class binding removes the boldClass. import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` [button class='colorClass boldClass italicsClass' [class.boldClass]='applyBoldClass']My Button[/button] ` }) export class AppComponent { applyBoldClass: boolean = false; }
Views: 96581 kudvenkat
Angular 2: Attribute Directives, ngClass, ngStyle
 
06:14
Attribute directives are designed to change the appearance or behavior of the DOM elements that they are attached to. In this lecture, you will learn how to use inbuilt ngClass and ngStyle attribute directives.
Views: 3846 GeekHours
9. Angular 2 \ 4 Tutorials For Beginners | Using ngClass, ngStyle and style
 
10:45
Complete Playlist - Angular 2 \ 4 Tutorials For Beginners https://www.youtube.com/playlist?list=PLnObopLrGSq7IlDrq3AMv3qu3o-9i5PiG Complete Playlist - ReactJS \ React JS Tutorial For Beginners https://www.youtube.com/playlist?list=PLnObopLrGSq6hs6dMaZXYoBOSldhjsaH2 Complete Playlist - Webpack tutorial for beginners https://www.youtube.com/playlist?list=PLnObopLrGSq6w9-Bb9B6GGE5TVdZ_eCGz Complete Playlist - Connecting to MS SQL database hosted in web hosting server(like godaddy / hostgator / plesk) using webservice / JSON in Visual Studio 2015 https://www.youtube.com/playlist?list=PLnObopLrGSq7tknkyFRVJf8fgylfXmhZT YouTube : https://www.youtube.com/megharajdeepak Twitter : https://twitter.com/megharajdeepak LinkedIn : https://www.linkedin.com/in/megharajdeepak
Views: 484 Deepak MS
AngularJS ng-class
 
05:57
ngClass makes applying conditional CSS classes a breeze.
Views: 12593 Joe Maddalone
Angular Video 3: Theming with Style: How to Customize Your Kendo UI Angular App
 
12:14
Our Buttons are looking pretty good as is. But what if we wanted to customize them? Where would we even get started? Find out the answers to these questions, along with other input related ones in this third episode of the Angular and Kendo UI video course. Resources: • Code on Github: https://github.com/alyssamichelle/angular-kendo-unite/tree/video-3 • Kendo UI for Angular: https://www.telerik.com/kendo-angular-ui • Kendo UI Styling Docs: https://www.telerik.com/kendo-angular-ui/components/styling/ • List of Modifiable Variables: https://www.telerik.com/kendo-angular-ui-develop/components/styling/theme-material/customization/ • All Modifiable SASSY Variable Lists: https://www.telerik.com/kendo-angular-ui-develop/components/styling/#toc-customizing-themes • Complete Getting Started Tutorial: https://www.telerik.com/campaigns/kendo-ui/using-kendo-ui-with-angular-video-tutorial
Views: 924 Kendo UI
Install Bootstrap for Angular 6
 
04:13
In this video we will discuss, installing and configuring Bootstrap for use in an Angular 6 project. Text version of the video http://csharp-video-tutorials.blogspot.com/2018/09/install-bootstrap-for-angular-6.html Slides http://csharp-video-tutorials.blogspot.com/2018/09/install-bootstrap-for-angular-6-slides.html Angular 6 Tutorial https://www.youtube.com/playlist?list=PL6n9fhu94yhWNJaDgh0mfae_9xoQ4E_Zj Angular 6 Tutorial Text Articles & Slides http://csharp-video-tutorials.blogspot.com/2018/09/angular-6-tutorial-for-beginners.html Angular, JavaScript, jQuery, Dot Net & SQL Playlists https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd We will be using Bootstrap for styling. Install bootstrap using the following NPM command npm install [email protected] jquery --save This installs Bootstrap in the node_modules folder. If you do not find the bootstrap folder in node_modules folder, restart visual studio code and you will find it. You can also execute the following command in the integrated terminal window and search for bootstrap folder. dir node_modules In Angular CLI configuration file include the path to the Bootstrap CSS file in the styles array. Remember in Angular 6, the Angular CLI configuration file is renamed to angular.json from angular-cli.json. "styles": [ "src/styles.css", "node_modules/bootstrap/dist/css/bootstrap.min.css" ] Bootstrap relies on jQuery for some of it's features. If you plan on using those features, please include the path to jQuery and Bootstrap jQuery files in the scripts array in angular.json file. "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ] To verify that you have the correct paths specified, you can request the respective files by running the angular project and pointing your browser to http://localhost:4200/node_modules/bootstrap/dist/css/bootstrap.min.css
Views: 53251 kudvenkat
Angular 2 Preparation - EPISODE 2/6 - Style Guide Implementation
 
06:28
This video is part of a free online course about preparing for Angular 2, If you like it - LIKE IT, SHARE IT & SUBSCRIBE ♥ The Angular style guide contains a lot of good rules to follow. In this video we'll cover 3 of them and see how they help us refactor our code to look more like the future Angular 2 code. TOPICS - ✔ What is the Angular Style Guide ✔ What are the 3 principles we need to implement ✔ What is IIFE? ✔ How Angular 2 Dependency Injection will look like ✔ Weird Stuff ABOUT THIS COURSE ---------------------------------- Angular 2 is exciting, and brings lots of new concepts which replace old ones. In this free video course we'll go over the basic changes and best practices we need to implement in our angular 1.x code in order to prepare it for the future migration to Angular 2. John Papa's Style Guide - https://github.com/johnpapa/angular-styleguide Todd Motto's Style Guide - https://github.com/toddmotto/angularjs-styleguide The Angular 2 Example - https://github.com/angular/angular/blob/master/modules/examples/src/todo/index.ts For more videos in this free video course join: http://HiRez.io ♥ SUBSCRIBE! http://www.youtube.com/subscription_center?add_user=hirezio Credits: Misko Hevery for willing to play along with my weird video ideas :) ♥ Twitter: https://twitter.com/hirez_io ♥ LIKE & SHARE ----------------------------------------------- ♥ Join: http://HiRez.io
Views: 5005 HiRez.io
Angular trigger validation manually
 
09:04
Text version of the video http://csharp-video-tutorials.blogspot.com/2018/03/angular-trigger-validation-manually.html Slides http://csharp-video-tutorials.blogspot.com/2018/03/angular-trigger-validation-manually_7.html Angular CRUD Tutorial https://www.youtube.com/playlist?list=PL6n9fhu94yhXwcl3a6rIfAI7QmGYIkfK5 Angular CRUD Tutorial Text Articles & Slides http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists In this video we will discuss 1. How to add or remove validation styles to a group of elements in Angular 2. How to trigger validation manually in Angular using the updateValueAndValidity() function How to add and remove validation styles to a group of elements in Angular Use the ngModelGroup directive and group the elements. Now we can add or remove validation styles from the group. This in turn adds or removes the validation styles from all the elements in that group. In our case, we want to group password and confirm password fields to be able to control their validation styles. Notice in the example below, both password and confirm password fields are grouped using the ngModelGroup directive. The bootstrap validation class has-error is conditionally added or removed from the group. [div ngModelGroup="passwordGroup" [class.has-error]="confirmPassword.touched && confirmPassword.invalid"] [div "passwordFieldDiv"] ... [/div] [div "confirmPasswordFieldDiv"] ... [/div] [/div] Use of updateValueAndValidity() function : At the moment we have a problem with confirm password field validation. It does not work in one of the scenarios. Here is the scenario. If you first change PASSWORD field and then the CONFIRM PASSWORD field, the validation works as expected. Now if you go back and change the PASSWORD field, the validation will not be triggered and you will not see the validation error even if the passwords do not match. This is because our custom validation directive is applied on the confirm password filed but not on the password. So our custom validation is triggered only when the confirm password field is changed and not when the password field is changed. To make this work, even when the password field is changed, we have to tell confirm password field to run it's validation when password field is changed. So the obvious question that comes to our mind is, how to tell the confirm password field to run it's validation? Well updateValueAndValidity() function comes to the rescue. When this method is called on a control, that control's validation logic is executed again. Notice the event binding in the example below. The change event of the password field triggers a call to confirm password field's updateValueAndValidity() function. This in turn runs the confirm password field validation. [input name="password" (change)="confirmPassword.control.updateValueAndValidity()" …] The change event is fired only after the form control has lost focus. The input event is fired as the user changes the value. So if you want the validation to trigger as the user is changing the value, use the input event instead of change event.
Views: 12705 kudvenkat
Angular ngif directive
 
11:44
In this video we will discuss 1. Angular ngIf structural directive with an example 2. How to prevent a button from submitting form For code and text version of the video http://csharp-video-tutorials.blogspot.com/2018/01/angular-ngif-directive.html Slides http://csharp-video-tutorials.blogspot.com/2018/01/angular-ngif-directive-slides.html Angular CRUD Tutorial https://www.youtube.com/watch?v=rJ9o4TyhSuo&list=PL6n9fhu94yhWUcq5Pc16uf8YKXoZ87Vh_ Angular CRUD Tutorial Text Articles & Slides http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists
Views: 18597 kudvenkat
Learn How to Use NG-STYLE with AngularJS
 
05:04
Learn How to Use NG-STYLE with AngularJS. Best Course To Learn React in 2018: https://click.linksynergy.com/fs-bin/click?id=KxXQN2CV9Bk&offerid=358574.7493&type=3&subid=0 Learn Advanced React and Redux: https://click.linksynergy.com/fs-bin/click?id=KxXQN2CV9Bk&offerid=358574.7494&type=3&subid=0 Take my course and learn JavaScript in 2018: https://theodoreanderson.teachable.com/p/introduction-to-javascript Best book to learn the MEAN Stack: http://amzn.to/2DqEf4s Best book on learning advanced JavaScript: http://amzn.to/2C2oEM8 My site: https://thejavascriptchronicles.com
Views: 748 Theodore Anderson
NgSwitch Directive - Angular 5 (Tutorial #11)
 
09:17
Hello Friends, In this video we will learn about ngSwitch Directive in Angular 5 NgSwitch is a directive which is bound to an expression. It is used to display the element tree based on the set of many elements. It has basic elements like below, ngSwitch we bind an expression to it ngSwitchCase it defines an element with the matched value we need to provide the * before it. ngSwitchDefault This is the default case which will be executed if no match happened. If you liked my channel , subscribe to it and like my videos. For any queries ask you question in comment section you can also connect with me @ Facebook: https://www.facebook.com/AngularJS4Beginners LinkedIn: https://www.linkedin.com/in/nisha-singla-82407aa0/ Website : http://nishasingla.com/
Views: 1646 Nisha Singla
Angular 5 Tutorial in Hindi Part 9: CSS Class Binding In Angular 5 in Hindi
 
13:28
Welcome Developers, we will see CSS Class Binding In Angular 5 in Hindi and we will only see the CSS classes how to remove or add at runtime. It's easy to bind CSS classes to elements in your Angular 5 templates. You provide a class name with class.className between brackets in your templates and then an expression on the right that should evaluate to true or false to determine if the class should be applied. Class binding You can add and remove CSS class names from an element's class attribute with a class binding. Class binding syntax resembles property binding. Instead of an element property between brackets, start with the prefix class, optionally followed by a dot (.) and the name of a CSS class: [class.class-name]. Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines. Don't Forget to Follow me on all Social Network, Instagram Link: https://www.instagram.com/vinodthapa55 Facebook Link: https://www.facebook.com/vinodthapa55 Twitter Link: https://twitter.com/vb55thapa Facebook ThapaTechnical Page Link: https://www.facebook.com/vinodbahadur...
Views: 2627 Thapa Technical
How to Always Keep the Footer at the Bottom of A Page | Learn HTML and CSS | HTML Tutorial
 
10:01
How to Always Keep the Footer at the Bottom of A Page | Learn HTML and CSS | HTML Tutorial. In this lesson we will learn how to keep the footer at the bottom of our page. Meaning that we don't want the footer to go above the height of our browser, when we don't have a lot of content on our pages. -- mmtuts is a YouTube channel that focuses on teaching beginner and advanced courses in various multimedia related skills. We plan to make tutorials available on programming, video production, animation, graphic design, and on software such as the Adobe Creative Cloud programs. HTML and CSS for beginners is a how to series that teaches the HTML and CSS coding language to people who are just starting out learning programming. The course teaches how HTML and CSS can be made easy and teaches "front-end development" which is the visual part of websites. Creating static websites with HTML and CSS is easy and should not be seen as otherwise, which is why we want to explain the language in a easy to understand way for beginners. If you have suggestions on new courses, or specific lessons within existing courses you would like to see, then feel welcome to submit them in the comment section or in a private message. ALL suggestions will be seen, but not all will be replied to since we get quite a few every day.
Views: 81938 mmtuts
AngularJS For Everyone Tutorial #9 - ngIf vs ngShow & ngHide
 
06:46
Here I show you how to use ngIf and ngShow & ngHide to show and hide content. Subscribe for more free tutorials https://goo.gl/6ljoFc, more Angular Tutorials: https://goo.gl/vFi0CQ https://docs.angularjs.org/api/ng/filter Support Free Tutorials https://www.leveluptutorials.com/store/ The best shared web hosting http://www.bluehost.com/track/leveluptutorials/ Subscribe to Level Up Pro for extra features! https://www.leveluptutorials.com/store/products/pro Subscribe to the Level Up Newsletter http://eepurl.com/AWjGz To Support Level Up Tuts: http://leveluptuts.com/donations Simple cloud hosting, built for developers.: https://www.digitalocean.com/?refcode=67357174b09e HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
Views: 19397 LevelUpTuts
Displaying angular form validation error messages
 
10:00
In this video we will discuss 1. How to display validation error messages to the user 2. Style the error messages using Bootstrap 3. How to disable Submit button if the form is not valid Text version of the video http://csharp-video-tutorials.blogspot.com/2018/01/displaying-angular-form-validation.html Slides http://csharp-video-tutorials.blogspot.com/2018/01/displaying-angular-form-validation_31.html Angular CRUD Tutorial https://www.youtube.com/watch?v=rJ9o4TyhSuo&list=PL6n9fhu94yhWUcq5Pc16uf8YKXoZ87Vh_ Angular CRUD Tutorial Text Articles & Slides http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists
Views: 27430 kudvenkat
Angular forms tutorial
 
17:29
In Part 2 of Angular CRUD tutorial, we discussed performing the READ operation. In this video and in the next few videos we will discuss performing the CREATE operation. To understand the CREATE operation, let us build a form that help us create a new employee. For this we will use the createEmployee component that we already created in one of our previous videos in this series. Along the way, we will also discuss performing validation and displaying meaningful error messages to the user. There are 2 ways to create forms in Angular 1. Template Driven Forms 2. Model Driven Forms (Commonly called Reactive Forms) Both these approaches have their own pros and cons. For example, Template Driven forms are generally used to create simple forms. On the other hand, Reactive forms are used to create complex forms. For example, if you want to add form controls dynamically or perform cross-field validation we use the Reactive forms approach. There are several other differences, between Template driven and Reactive forms. We will discuss those differences in detail, in a later video. In this video, we will use the Template driven approach to build the "Create Employee" form. As the name implies, template driven forms are heavy on the template. This means we do most of the work in the view template of the component. Design "Create Employee" form. To keep this simple, at the moment we only have 2 fields (Full Name & Email). We will add the other fields like Gender, Department, Phone Number etc.. later. Also, at the moment, we only have textboxes on our form. In our upcoming videos we will discuss working with radio buttons, checkbox, dropdownlist etc For the form HTML, please refer to our blog using the below link. http://csharp-video-tutorials.blogspot.com/2017/12/angular-forms-tutorial.html Code Explanation: We are using Bootstrap CSS classes like panel, panel-primary, panel-heading, panel-title etc to style the form. There is no Angular here. If you are new to bootstrap, please click here to check out our Bootstrap tutorial using the following link http://csharp-video-tutorials.blogspot.com/2016/05/bootstrap-tutorial-for-beginners.html Consider the following line of code [form #employeeForm="ngForm" (ngSubmit)="saveEmployee(employeeForm)"] #employeeForm is called the template reference variable. Notice we have assigned "ngForm" as the value for the template reference variable employeeForm. So employeeForm variable holds a reference to the form. When Angular sees a form tag, it automatically attaches the ngForm directive to it. The ngForm directive supplements the form element with additional features. It holds all the form controls that we create with ngModel directive and name attribute, and monitors their properties like value, dirty, touched, valid etc. The form also has all these properties. We will discuss these properties at the individual control level and at the form level in detail in our upcoming videos. The ngSubmit directive submits the form when we hit the enter key or when we click the Submit button. When the form is submitted, saveEmployee() method is called and we are passing it the employeeForm. We do not have this method yet. We will create it in the component class in just a bit. The ngForm directive is provided by Angular FormsModule. So for us to be able to use it, we will have to import the FormsModule in our AppModule file (app.module.ts). So please make sure to include the following import statement. Also include "FormsModule" in the imports array of @NgModule decorator. import { FormsModule } from '@angular/forms'; If "FormsModule" is not imported you will see the following error in the browser developer tools there is no directive with exportas set to ngform The ngModel directive is used for creating two-way data binding i.e to keep the HTML element value and it's corresponding component property in sync. We discussed two-way data binding in detail in our Angular 2 course. Use the link below to watch two-way data binding video. https://www.youtube.com/watch?v=aBf1nLGuVz8&index=15&list=PL6n9fhu94yhWqGD8BuKuX-VTKqlNBj-m6 Text version of the video http://csharp-video-tutorials.blogspot.com/2017/12/angular-forms-tutorial.html Slides http://csharp-video-tutorials.blogspot.com/2017/12/angular-forms-tutorial-slides.html Angular CRUD Tutorial https://www.youtube.com/watch?v=rJ9o4TyhSuo&list=PL6n9fhu94yhWUcq5Pc16uf8YKXoZ87Vh_ Angular CRUD Tutorial Text Articles & Slides http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists
Views: 56893 kudvenkat
Running angular app locally
 
06:37
In this video we will discuss 1. How to compile and run an angular application locally on your development machine 2. What happens behind the scenes when we compile and run an angular application 3. What is bundling and why is it important for performance So far in this video series we have been using the following command to build and run our angular application. ng serve --open Have you ever thought about what happens behind the scenes when we execute this command. Behind the scenes, Angular CLI runs Webpack to build and bundle all JavaScript and CSS code. In most cases the following are the bundles. Bundle File What it contains inline.bundle.js WebPack runtime. Required for WebPack to do it's job main.bundle.js All our application code that we write polyfills.bundle.js Browser Polyfills styles.bundle.js Styles used by the application vendor.bundle.js Angular and 3rd party vendor files What is bundling and why is it important for performance A typical real world angular application is made up of many components. Each component code is in it's own .ts file which gets transpiled to JavaScript i.e to a .js file. Along the same lines, a component may also have it's own .css file for styles. So our angular application code is in many small files. In addition to our application code files, we also have vendor code files like Angular, jQuery etc. Web browsers have a limit on how many scripts or CSS files they can download simultaneously. Because of this browser limitation, your application may suffer from performance perspective, if it has many JavaScript and CSS files to download. Bundling can solve this problem by combining many small application and library files into a few bundles. As mentioned before, Angular CLI runs WebPack for building and bundling angular applications. There are several ways to see these generated bundles. 1. If you have executed the "ng serve --open" command in a command prompt window, upon build completion you can see the generated bundles in the command prompt window 2. If you have executed the "ng serve --open" command in Visual Studio Code Integrated Terminal, upon build completion you can see the generated bundles in the integrated terminal window 3. "ng serve --open" command builds and runs the application. By default the application runs at port number 4200. You can change this default port number if you want to. We will discuss how to do that in our upcoming videos. When the application is served in the browser you can see the generated bundles on the "Elements" tab in Browser Developer Tools. 4. You can also see these bundles on the "Sources" tab in Browser Developer Tools. 5. To see the bundles along with their sizes click on the Network tab. If you don't see the bundles, refresh the browser window by pressing F5. In addition to bundling, we can also use other optimisation techniques like Ahead-of-Time (AOT) Compilation, Minification, Uglification and TreeShaking to improve performance. We will discuss all these techniques and how to implement them in our upcoming videos. The ng serve command builds and serves the application from memory for a faster development experience. It does not write the build artifacts to the disk, so we cannot use this command if you want to deploy the build to another server. For example, if you want to deploy your angular application to a test server for testing, or to your production server we cannot use ng serve. We instead use ng build. This command writes the build artifacts to the specified output folder, so the application can be deployed elsewhere. We will discuss ng build in our upcoming videos. To customise the in-memory builds that the "ng serve" command produces, there are several options that we can use along with this command. We will discuss these options in our next video. Text version of the video http://csharp-video-tutorials.blogspot.com/2017/11/running-angular-app-locally.html Slides http://csharp-video-tutorials.blogspot.com/2017/11/running-angular-app-locally-slides.html Angular CLI Tutorial https://www.youtube.com/watch?v=rJ9o4TyhSuo&list=PL6n9fhu94yhWUcq5Pc16uf8YKXoZ87Vh_ Angular CLI Text articles & Slides http://csharp-video-tutorials.blogspot.com/2017/10/angular-cli-tutorial-for-beginners.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists
Views: 21688 kudvenkat
💥 Angular Directives Tutorial For Beginners - Style Angular Components - ngClass and NgStyle
 
03:03
Check out our Angular for Beginners Free Course - https://angular-university.io/course/getting-started-with-angular2?utm=yt-free-course This Angular Tutorial is an overview of how to use the ngClass and ngStyle Directives when to use which, and alternative syntax in case we only to modify one property/style. For more videos tutorials on Angular, have a look at the courses available in the Angular University - https://angular-university.io Follow us: Twitter - https://twitter.com/AngularUniv Google+ - https://plus.google.com/u/1/113731658724752465218 Facebook - https://www.facebook.com/angular.university Check out the PDF E-Books available at the Angular University - https://angular-university.io/my-ebooks
Views: 1329 Angular University
Angular 2 routing tutorial
 
17:38
Text version of the video http://csharp-video-tutorials.blogspot.com/2017/08/angular-2-routing-tutorial.html Slides http://csharp-video-tutorials.blogspot.com/2017/08/angular-2-routing-tutorial_15.html Angular 2 Tutorial playlist https://www.youtube.com/playlist?list=PL6n9fhu94yhWqGD8BuKuX-VTKqlNBj-m6 Angular 2 Text articles and slides http://csharp-video-tutorials.blogspot.com/2017/06/angular-2-tutorial-for-beginners_12.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists Tags angular 2 router html5 mode angular 2 cannot find primary outlet to load component angular2 routing hash angular 2 router link active angular 2 router tutorial angular 2 router use hash angular 2 router wildcard angular 2 router with hash angular 2 router youtube angular 2 routing hash angular 2 routing href In this video we will discuss the basics of routing in Angular 2. Routing allows users to navigate from one view to another view. At the moment, we have EmployeeListComponent in our application. Let's create another simple HomeComponent so we can see how to navigate from HomeComponent to EmployeeListComponent and vice-versa. If the user tries to navigate to a route that does not exist, we want to route the user to PageNotFoundComponent. So let's create this component as well. Here are the steps to implement routing in Angular 2 applications. Step 1 : Set [base href] in the application host page which is index.html. The [base href] tells the angular router how to compose navigation URLs. [base href="/src/"] Step 2 : In our angular application root module (app.module.ts), import RouterModule and Routes array and define routes as shown below. import { RouterModule, Routes } from '@angular/router'; // Routes is an array of Route objects // Each route maps a URL path to a component // The 3rd route specifies the route to redirect to if the path // is empty. In our case we are redirecting to /home // The 4th route (**) is the wildcard route. This route is used // if the requested URL doesn't match any other routes already defined const appRoutes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'employees', component: EmployeeListComponent }, { path: '', redirectTo: '/home', pathMatch: 'full' }, { path: '**', component: PageNotFoundComponent } ]; // To let the router know about the routes defined above, // pass "appRoutes" constant to forRoot(appRoutes) method @NgModule({ imports: [ BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(appRoutes) ], declarations: [AppComponent, HomeComponent, …], bootstrap: [AppComponent] }) export class AppModule { } Important: The order of the routes is very important. When matching routes, Angular router uses first-match wins strategy. So more specific routes should be placed above less specific routes. In the configuration above, routes with a static path are listed first, followed by an empty path route, that matches the default route. The wildcard route comes last because it matches every URL and should be selected only if no other routes are matched first. Step 3 : Tie the routes to application menu. Modify the root component (app.component.ts) as shown below. The only change we made is in the inline template. We are using Bootstrap nav component to create the menu. We discussed Bootstrap nav component in Part 27 of Bootstrap tutorial. The routerLink directive tells the router where to navigate when the user clicks the link. The routerLinkActive directive is used to add the active bootstrap class to the HTML navigation element whose route matches the active route. The router-outlet directive is used to specify the location where we want the routed component's view template to be displayed. The routerLink, routerLinkActive and router-outlet directives are provided by the RouterModule which we have imported in our application root module. If you forget to specify the router-outlet directive, you will get and error stating - cannot find primary outlet to load component. Step 4 : Finally in web.config file of our angular application include url-rewrite rule to tell IIS how to handle routes. If you do not have the above url rewrite rule, when you referesh the page you will 404 page not found error. To use "hash style" urls instead of HTML5 style url's, you just need to make one change in app.module.ts file. Set useHash property to true and pass it to the forRoot() method as shown below. RouterModule.forRoot(appRoutes, { useHash: true }) If you are using "hash style" routes, we don't need the URL rewrite rule in web.config file.
Views: 79286 kudvenkat
Add Bootstrap in Angular -  Angular 5 (Tutorial #8)
 
09:54
Bootstrap is the most popular HTML and CSS framework for building responsive layouts without having a deep knowledge of CSS. So in this session, we will learn how we can add Bootstrap in Angular There are 2 approach to use bootstrap in Angular 1) CDN : Content Delivery Network 2) Download bootstrap using npm 1st Approach using CDN : In case of CDN we will copy the url for bootstrap and paste that url in index.html file We will have one bootstrap.min.css and 3 scripts file: 1) jquery 2)popper.js 3) bootstrap.js Bootstrap 4 is the latest version of bootstrap which have dependency on 2 libraires and that is jquery and popper.js jquery is a library of javascript and popper js is also a javascript library that helps you in positioning your HTML elements very quicky specially when you have something like notification 2nd approach of using bootstrap : we can download all these libraries using npm command 1) npm install jquery popper.js 2) npm install [email protected] Once dependencies get installed it will save these dependencies in node_modules folder Now we can't link these path in index.html. If you want to set any global CSS or JS you need to give the path in angular-cli.json file there we have one styles key there we have to give the path of bootstrap.min.css Now we "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ] and in scripts key refer jquery, popper and bootstrap.js "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/popper.js/dist/umd/popper.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ] If you make any changes in angularcli.json file we need to restart angular server to make it work. Press Ctrl+C(to stop current running server) and start the server using ng serve -o command and you can see it is working If you liked my channel , subscribe to it and like my videos. For any queries ask you question in comment section you can also connect with me @ Facebook: https://www.facebook.com/AngularJS4Beginners LinkedIn: https://www.linkedin.com/in/nisha-singla-82407aa0/ Website : http://nishasingla.com/
Views: 3090 Nisha Singla
Angular Material Theming, with Fx-Layout, Sass, and color service
 
17:27
🌎 Demo: https://ajonp-lesson-10.firebaseapp.com/kitchensink 🎓 Lesson: https://ajonp.com/lessons/10-angular-material-theming/ Angular Material is the officially supported components for implementing Google's Material Design System within Angular. There are 4 pre-built themes that come with Angular Material - deeppurple-amber - indigo-pink - pink-bluegrey - purple-green We are going to take a look at creating our own theme and including this in with our default style, then using this to provide mixins for each of our components styles. Probably the biggest complaint that I hear about Themes in Angular Material is the requirement for building an entire new set of css using the sass function, which bloats your style.css files. Please checkout [Ionic CSS Variables](https://beta.ionicframework.com/docs/theming/color-generator) to see a comparison of how this can be accomplished. As of writing this still remains an [open issue on GitHub](https://github.com/angular/material2/issues/4352) ## Lesson Steps 1. [Kitchen Sink Component](https://ajonp.com/lessons/10-angular-material-theming/#kitchen-sink-component) 1. [Angular Flex-Layout](https://ajonp.com/lessons/10-angular-material-theming/#angular-flex-layout) 1. [Angular Material Theme Creation](https://ajonp.com/lessons/10-angular-material-theming/#angular-material-theme-creation) 1. [Theme Selection Angular Service](https://ajonp.com/lessons/10-angular-material-theming/#theme-selection-angular-service) 1. [Sass Mixins](https://ajonp.com/lessons/10-angular-material-theming/#sass-mixins) 1. [Tools](https://ajonp.com/lessons/10-angular-material-theming/#tools) # Tools ## Tools Used In Lesson - [Angular Flex-Layout](https://github.com/angular/flex-layout) - [Material Design Palette Generator](http://mcg.mbitson.com) - [Sass Guide](https://sass-lang.com/guide) - [Angular Material Theming](https://material.angular.io/guide/theming) - [Angular Material Kitchensink](https://github.com/angular/material2/blob/b21cfb73261e5c334280a185762ffcc475348b76/src/universal-app/kitchen-sink/kitchen-sink.ts) ## Additional Tools - [tburleson Layout Demos](https://tburleson-layouts-demos.firebaseapp.com/#/docs) - [Material IO](https://material.io/) - [SketchApp](https://www.sketchapp.com/) - [Material Sketch Plugin](https://material.io/tools/theme-editor/) - [Ionic CSS Variables](https://beta.ionicframework.com/docs/theming/color-generator) I was a little rushed on this lesson/video so if you have any questions jump on the Slack Channel https://ajonp-com.slack.com/join/shared_invite/enQtNDk4NjMyNDUxMzM0LWQwMThkZDE3MDAzNzVmNWE3N2M1NzkwMzg1YWQ5NzIxZmIyYTM3ZjEyOGU3YjQ0NTFkYzRmZjMyYzExNDNlNTg)
Views: 2611 AJONP
Using Bootstrap with Angular 2
 
08:45
Text version of the video http://csharp-video-tutorials.blogspot.com/2017/08/using-bootstrap-with-angular-2.html Slides http://csharp-video-tutorials.blogspot.com/2017/08/using-bootstrap-with-angular-2_14.html Angular 2 Tutorial playlist https://www.youtube.com/playlist?list=PL6n9fhu94yhWqGD8BuKuX-VTKqlNBj-m6 Angular 2 Text articles and slides http://csharp-video-tutorials.blogspot.com/2017/06/angular-2-tutorial-for-beginners_12.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists In this video we will discuss 1. How to install and use Bootstrap with Angular 2. How to enable intellisense for bootstrap in Visual Studio How to install and use Bootstrap with Angular : There are several ways to install Bootstrap. One way is by using Node.js command prompt. Step 1 : Open node.js command prompt window. Step 2 : In the command prompt navigate to the folder that contains your angular project and type the following command and press enter key. As Bootstrap has a dependency on jQuery, we are installing jQuery as well. npm install [email protected] jquery --save This installs both Bootstrap and jQuery for use with our Angular project. The required Bootstrap and jQuery files are copied into the node_modules folder within the project directory. Also, notice package.json file is also automatically updated with both the dependencies (Bootstrap and jQuery) Step 3 : Finally in index.html file add the following script and link elements to reference the required CSS and JS files. As you can see, these files are being served from the node_modules folder. [script src="/node_modules/jquery/dist/jquery.min.js"][/script] [link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" /] [script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"][/script] The problem at the moment is intellisense for Bootstrap CSS classes is not working in index.html, or any of the components html files How to enable intellisense for bootstrap in Visual Studio : Use the following workaround to enable intellisense for bootstrap in Visual Studio. Step 1 : In Visual Studio, click to select the Angular project and then click on "Show All Files" icon. You will then see "node_modules" folder. Step 2 : Expand "node_modules" folder. Locate "bootstrap" folder. Right click on it and select "Include In Project" option from the context menu. At this point you should get bootstrap intellisense in index.html and all angular component html files. If you still do not get bootstrap intellisense, please restart Visual Stduio and you will get intellisense. As I said before, there are several ways to install bootstrap. One way is by using Node.js command prompt. The other way is by using Visual Stduio NuGet package manager. To install Bootstrap using NuGet package manager follow these steps. Step 1 : In Visual Studio Solution Explorer, right click on the Angular project and select "Manage NuGet Packages" option from the context menu Step 2 : In the "NuGet Package Manager" window Click on the "Browse" link In the textbox, type "Bootstrap" and press "enter" key Click on the first item which says - Bootstrap Click on the arrow pointing downwards to install The required CSS and JS files are placed in Content and Script folders. Finally place the required CSS and JS files in index.html page to start using Bootstrap. If you install Bootstrap using NuGet you don't have to do anything else to get bootstrap intellisense. If you do not want to download bootstrap, you can use their CDN links. You can find the official Bootstrap CDN links at the following page. http://getbootstrap.com/getting-started/ Besides these 3 ways, there are other ways of installing Bootstrap. Which way to use depends on your project needs.
Views: 53920 kudvenkat
Conditionally Apply A Class In AngularJS Using ng-class
 
02:33
Please visit http://www.technomark.in/Best-Way-To-Conditionally-Apply-A-Class-In-AngularJS.aspx for more information. Conditionally Apply A Class Using ng-class In AngularJS, Best Way To Conditionally Apply A Class In AngularJS, How To Conditionally Apply A Class In AngularJS, ng-class In AngularJS, Conditional Class In AngularJS, HTML, PHP, Asp.Net
Views: 1064 Admin Technomark
Angular Material Responsive Navigation Tutorial
 
19:11
Pretty much all pages need a responsive navigation. Angular Material has all the Angular components you need to build a nice looking and fully responsive navigation for your Angular app. Angular Material is a rich suite of pre-built Angular components that follow the Google Material design spec. This tutorial explores the Angular Material data table and how to use it! ---------- Build a complete Angular App with Angular Material, Angularfire, NgRx & More: https://www.udemy.com/angular-full-app-with-angular-material-angularfire-ngrx/?couponCode=ACAD_M Further Resources (incl. Link to Code): https://www.academind.com/learn/angular/angular-material-a-thorough-guide/responsive-navigation Want to learn something totally different? Check out all other courses: https://academind.com/learn/our-courses ---------- • You can follow Max on Twitter (@maxedapps). • And you should of course also follow @academind_real. • You can also find us on Facebook.(https://www.facebook.com/academindchannel/) • Or visit our Website (https://www.academind.com) and subscribe to our newsletter! See you in the videos! ---------- Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!
Views: 84190 Academind
The Complete Angular, React & Node Guide - Airbnb Style App
 
01:59
Click the link to enroll: https://www.udemy.com/practical-angular-react-node-airbnb-style-application/?couponCode=ARN_START_DEV "Basic to advanced Angular, React, Node explained in simple way. Redux, MongoDB, Express and other related concepts and technologies included. Production ready on Heroku." If you are planning to start your career as a developer or you just want to improve your programming skills, then this course is right for you. I will guide you from basic concepts of React, Angular, Node and many related technologies of Web Development to more advanced topics until our application will be deployed to Heroku and accessible online on the internet. This resource is the only thing you need in order to start Web Development with Angular, React and Node and during this course you will get confidence and skills required to start your own projects, you will get the right mindset to apply for a developer career and to improve in modern frameworks like Angular, React and Node, My name is Filip Jerga. I am software engineer currently working as freelance developer. I have master degree from Artificial Intelligence and through years I experienced working on different projects and technologies from developing software for Ultrasound device in C++ to making mobile applications in modern frameworks like React and Angular. My Website: https://www.filipjerga.com/ Join FB group for developers: https://www.facebook.com/groups/217273012433804/
Views: 1159 Filip Jerga
Alex Lakatos | Even more opinionated Angular 2 Style Guide
 
19:46
Alex Lakatos Mozilla Tech Speaker Alex Lakatos wears many hats at Mozilla for the past 5 years, including but not limited to Mozilla Tech Speaker, Mozilla Reps Council Member, T-Shirt Lover. JavaScript developer building on the open web, he has been pushing its boundaries every day. A Trainer based in London he's been doing public and private Angular classes, runs a Meetup group, and just can't shut up about Angular when in front of an audience. Even more opinionated Angular 2 Style Guide If you are looking for an even more opinionated style guide for syntax, conventions, and structuring Angular 2 applications, then you're in the right place. The purpose of this talk is to provide guidance on building Angular 2 applications by showing the most common conventions used, highlight some of the Angular 2 recommended ones and, more importantly, what rules you can bend.
Views: 282 NG-Poland.pl
Try AngularJS 1.5 - 26 of 33 - Bootstrap & CSS
 
09:52
Try AngularJS 1.5 - 26 of 33 - Bootstrap & CSS Try AngularJS is a step-by-step introduction to the AngularJS framework version 1.5. In this series we will teach you the fundamentals of AngularJS to build a front end application in the form of a blog. AngularJS is a front end system that really shines when you add a backend to it. The ideal backed is a RESTful API using Django and the Django Rest Framework. Build an Django + Angular project: https://www.codingforentrepreneurs.com/projects/django-angularjs/ Ask your questions here: http://joincfe.com/knock Topic suggestions: http://joincfe.com/suggest/ Step by step projects: http://joincfe.com/projects/ My equipment: Laptop: http://amzn.to/2c965EL 4k Camera: http://amzn.to/2cb0JeS Drone/Aerial Video: http://amzn.to/2cCUgLq Flexible/Travel Tripod for DSLR: http://amzn.to/2d13rXi (I highly recommend this too: http://amzn.to/2ckauYr) General Purpose Tripod: http://amzn.to/2d4xNUS Webcam: http://amzn.to/2bZEc7I Camera Mic: http://amzn.to/2cb0PTp Studio Mic: http://amzn.to/2cCdNc3 Mic Arm (for Studio): http://amzn.to/2cCepyd Shock Mount (for Studio): http://amzn.to/2c97uLN Phone: http://amzn.to/2c97R8X Tablet (and portable external monitor) : http://amzn.to/2c5Fqdx External Hard drives: http://amzn.to/2c5FvxV Headphones (mic used for travel recording): http://amzn.to/2c5GGNO
Views: 2046 CodingEntrepreneurs
Angular Routing
 
17:54
Implementing routing in an Angular application involves many small steps. Angular CLI does a pretty good job in having some of these routing steps implemented out of the box by just using --routing option. Before we discuss, how we can use Angular CLI to implement routing let's setup routing manually so we understand all the moving parts as far as implementing routing is concerned. Using the following command, first create a brand new Angular project using the Angular CLI. ng new employeeManagement We named it employeeManagement. Let's assume we are using this application to manage employees. Out of the box, Angular CLI has created the root component - AppComponent. In addition let's create the following 3 components home : ng g c home employees : ng g c employees pageNotFound : ng g c pageNotFound Steps to implement routing in Angular Step 1 : Set base href in the application host page - index.html Step 2 : Import the RouterModule into the application root module AppModule. The Router Module contains the Router service and Router directives such as (RouterLink, RouterLinkActive, RouterOutlet etc). So for us to be able to implement routing, we first need to import the Router Module in our AppModule. Step 3 : Configure the application routes. import { RouterModule, Routes } from '@angular/router'; // Each route maps a URL path to a component // The 3rd route specifies the route to redirect to if the path // is empty. In our case we are redirecting to /home // The 4th route (**) is the wildcard route. This route is used // if the requested URL doesn't match any other routes already defined const appRoutes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'employees', component: EmployeesComponent }, { path: '', redirectTo: '/home', pathMatch: 'full' }, { path: '**', component: PageNotFoundComponent } ]; // To let the router know about the routes configured above, // pass "appRoutes" constant to forRoot(appRoutes) method // We also have forChild() method. We will discuss the difference // and when to use one over the other in our upcoming videos @NgModule({ declarations: [... ], imports: [ BrowserModule, RouterModule.forRoot(appRoutes) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Step 4 : Specify where you want the routed component view template to be displayed using the router-outlet directive Step 5 : Tie the routes to application menu. To install bootstrap execute the following npm command npm install [email protected] --save Once Bootstrap is installed, open .angular-cli.json file and specify the path to the Bootstrap stylesheet in the styles property as shown below. "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css"] At this point Routing should be working as expected. The following are the directives provided by the RouterModule routerLink Tells the router where to navigate when the user clicks the navigation link routerLinkActive When a route is active the routerLinkActive directive adds the active CSS class. When a route becomes inactive, the routerLinkActive directive removes the active CSS class. The routerLinkActive directive can be applied on the link element itself or it's parent. In this example, for the active route styling to work correctly, routerLinkActive directive must be applied on the list item element and not the anchor element. router-outlet Specifies the location at which the routed component view template should be displayed At the moment routing is implemented in the root module - AppModule. However, for separation of concerns and maintainability, it is better to implement routing in a separate Routing module and then import that routing module in the AppModule. In a later video, we will discuss how to move routing into it's own routing module. As we have seen throughout this video, there are many moving parts that we have to remember, to implement routing correctly in an angular application. In our next video, we will discuss, the routing workflow and how routing actually works in Angular, by connecting all these little moving parts. Text version of the video http://csharp-video-tutorials.blogspot.com/2017/11/angular-routing.html Slides http://csharp-video-tutorials.blogspot.com/2017/11/angular-routing-slides.html Angular CLI Tutorial https://www.youtube.com/watch?v=rJ9o4TyhSuo&list=PL6n9fhu94yhWUcq5Pc16uf8YKXoZ87Vh_ Angular CLI Text articles & Slides http://csharp-video-tutorials.blogspot.com/2017/10/angular-cli-tutorial-for-beginners.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists
Views: 19502 kudvenkat
Bootstrap 4 Theme Customization (with Sass) | BOOTSTRAP 4 TUTORIAL
 
17:12
Bootstrap 4 makes the customization of themes, colors and sizes easy! Use SASS to adjust the look of your Bootstrap 4 project! You prefer CSS? Join the Full CSS Course at 90% off: https://acad.link/css Check out all our other courses: https://academind.com/learn/our-courses ---------- Source Code for the Video: https://academind.com/learn/css/bootstrap-4-tutorial/customization-themes-sass/ Full Playlist: https://academind.com/learn/css/bootstrap-4-tutorial/ Official Theming Docs: http://getbootstrap.com/docs/4.0/getting-started/theming/ ---------- • Go to https://www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts • Follow @maxedapps and @academind_real on Twitter • Join our Facebook community on https://www.facebook.com/academindchannel/ See you in the videos! ---------- Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!
Views: 49274 Academind
AngularJS Functions (ng show, ng hide, ng if) Briefly Explained
 
02:52
AngularJS Functions (ng show, ng hide, ng if) Briefly Explained
Views: 168 Dr Hydrogen
Angular 6 - Styling Elements Dynamically with ngStyle  - Basic Part#18
 
06:13
- Angular 6 - Basic Course Free - New Playlist: https://www.youtube.com/watch?v=t2d6vWlk378&list=PLl77zVBbAzddq38UX6Q6F7S61qwV-_PaO New Playlist Angular 6 - Basic Course Free : https://www.youtube.com/playlist?list=PLl77zVBbAzddq38UX6Q6F7S61qwV-_PaO SEE FULL PLAYLIST for WINDOWS10 : https://www.youtube.com/watch?v=TtNDW... SEE FULL PLAYLIST for MacOs : https://www.youtube.com/watch?v=MST99... In This Video do you will show you how to Start with Angular 6 with WINDOWS 10. Get start with the full Crash Course and Guide. 60.min fully Angular 6 Course and Code Guide only for you and Free! In This Video: - Install & Introduction - Basic Part#01 https://www.youtube.com/watch?v=t2d6vWlk378 - App Structure & Generate Components - Basic Part#02 https://www.youtube.com/watch?v=QBJCgWQ39M4&t=1s - Import Module - Basic Part#03 https://www.youtube.com/watch?v=X-VL9YcuFjA&t=11s - Using Custom Component - Basic Part#04 https://www.youtube.com/watch?v=ymesijGNrdE&t=2s - Creating Component with the CLI Nesting Component - Basic Part#05 https://www.youtube.com/watch?v=TvM-8VlPk6c&t=10s - Angular Template Engine - Basic Part#06 https://www.youtube.com/watch?v=SC-Lz1h-ZZs&t=11s - Work with the Component Style - Basic Part#07 https://www.youtube.com/watch?v=aIRra1txaVY&t=1s - Work with the Style.css - Basic Part#08 https://www.youtube.com/watch?v=vPoLCB1DrnM&t=9s - Understanding the Component Selector - Basic Part#09 https://www.youtube.com/watch?v=E0yxTNiEQxo&t=6s - String Interpolation - Basic Part#10 https://www.youtube.com/watch?v=_6faii1jJRw&t=10s - Proberty Binding - Basic Part#11 https://www.youtube.com/watch?v=LYtmpXWte1I&t=10s - Proberty Binding VS. String Interpolation - Basic Part#12 https://www.youtube.com/watch?v=ihrgo-Pv3s4&t=10s - Event Binding - Basic Part#13 https://www.youtube.com/watch?v=-iT55Dp8_ZQ&t=13s - Using Data in Event Binding - Basic Part#14 https://www.youtube.com/watch?v=H03u4sckhD8 - 2 Way DATA Binding - Basic Part#15 https://www.youtube.com/watch?v=OGRiSQT5mJQ&t=24s - Using *ngIf to Output DATA Conditionally - Basic Part#16 https://www.youtube.com/watch?v=DXjbHaAWSBI&t=1s - Enhancing *ngIf with Else Condition - Basic Part#17 https://www.youtube.com/watch?v=GOcZeKeGdTE&t=13s - Styling Elements Dynamically with ngStyle - Basic Part#18 https://www.youtube.com/watch?v=IzffHmrse2w&t=16s - OutPuting List with ngFor - Basic Part#19 https://www.youtube.com/watch?v=IJeweu2gT_k&t=11s - Applying Classes Dynamically with ngStyle - Basic Part#20 https://www.youtube.com/watch?v=fwb1YlZfyWg&t=89s Angular6 : https://angular.io/ Github: https://www.github.com NodeJS: https://nodejs.org/en/ NpmJS: https://www.npmjs.com/ Bootstrap 4: http://getbootstrap.com/ Donate Me and my Work as Developer: PayPal https://www.paypal.me/sysadmincat More to Read about Angular 6 Tutorials at my Blog : https://spaceg.github.io Twitter: https://twitter.com/majorcoding Angular6 : https://angular.io/ Github: https://www.github.com NodeJS: https://nodejs.org/en/ NpmJS: https://www.npmjs.com/ Bootstrap 4: http://getbootstrap.com/ Donate Me and my Work as Developer: PayPal https://www.paypal.me/sysadmincat More to Read about Angular 6 Tutorials at my Blog : https://spaceg.github.io Twitter: https://twitter.com/majorcoding
Views: 51 CodeGun
Angular Tutorials in Telugu - AngularJS Lesson 1
 
28:21
If you feel this video is useful, Please share it with your friends on Facebook, twitter Google plus etc.. Angular Tutorials in Telugu - AngularJS Lesson 1 For AngularJS File : https://angularjs.org/ CDN: http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js Please Subscribe... Computer in Telugu, Computer Tips in Telugu, Telugu Computer Tutorials, Ms Office in Telugu, Photoshop in Telugu, For more Computer videos in Telugu... Please visit : www.telugucomputerworld.blogspot.com Tags: Angular Tutorials in Telugu, angular tutorials point, angular tutorial pdf, angular tutorial for beginners, angular tutorial video, angular 2 tutorial, angular tutorial 2015, angular tutorial youtube, angular tutorial routing, angularjs tutorials for beginners, angularjs video tutorials, angularjs tutorials youtube, angularjs tutorials and examples, angularjs tutorials point pdf, angularjs tutorial for beginners step by step, best angularjs tutorials.
Views: 15078 Telugu Computer World