Home
Search results “Angular style variable”
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: 20397 DesignCourse
Angular 7 Tutorial - 10 - Template Reference Variables
 
03:03
Support - https://www.paypal.me/Codevolution Facebook - https://www.facebook.com/codevolutionweb Github - https://github.com/gopinav Angular | Angular Tutorial for Beginners | Angular Template Reference Variables
Views: 78320 Codevolution
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: 66973 kudvenkat
CSS Variables Tutorial (CSS Custom Properties)
 
23:06
In this video we will dive into CSS variables, also called CSS custom properties. We can now have dynamic values in our CSS without the use of a CSS pre-processor like Sass or Less SPONSOR: Check out Coding Dojo - http://www.codingdojo.com/l/yt/tr CODE: Codepen for this video https://codepen.io/bradtraversy/pen/VyPNOr 💖 BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia VISIT MY WEBISTE: Check Out My Udemy Courses http://www.traversymedia.com FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia https://discord.gg/traversymedia
Views: 37500 Traversy Media
Safely Modifying Elements with ElementRef & Renderer in Ionic
 
07:22
In this video tutorial, we look at how to update DOM elements in a platform agnostic way with Angular's Renderer. Blog post: https://www.joshmorony.com/safely-modifying-elements-with-elementref-renderer/ Learn Ionic: https://www.joshmorony.com/building-mobile-apps-with-ionic-2/
Views: 7572 Joshua Morony
Angular 2 for Beginners - Tutorial 5 - Data Binding and Variables
 
06:15
Facebook - https://www.facebook.com/TheNewBoston-464114846956315/ GitHub - https://github.com/buckyroberts Google+ - https://plus.google.com/+BuckyRoberts LinkedIn - https://www.linkedin.com/in/buckyroberts reddit - https://www.reddit.com/r/thenewboston/ Support - https://www.patreon.com/thenewboston thenewboston - https://thenewboston.com/ Twitter - https://twitter.com/bucky_roberts
Views: 54407 thenewboston
Dynamic CSS Variables (Custom Properties)
 
20:42
Did you know you can set CSS Variables (Custom Properties) using JavaScript? By hooking into events and other functions, you can create interesting animations which respond to user input using CSS Variables
Views: 1047 Michael Jasper
How To Create CSS Global Variables
 
05:57
This is a very quick video on how to create CSS variables without using css preprocessors. This is something very easy to do and extremely helpful for your web development process. Code used for this video: https://codepen.io/ieatwebsites/pen/Jrydxp Second Code used for this video: https://codepen.io/ieatwebsites/pen/pWreQG Learn more about ":root": https://css-tricks.com/almanac/selectors/r/root/ Music by: Nicolai Heidlas Music - Chase Your Dreams https://soundcloud.com/nicolai-heidlas
Views: 1157 iEatWebsites
Angular 4 Tutorial 9: *ngIf Local Variable Assignment
 
05:24
Learn how to assign local variable in ngIf to the result returned by it in Angular. 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: 14306 codedamn
Angular 2 Tutorial 9: styles property
 
06:03
Learn how to add styles into your component in Angular 2 and use CSS. Website: http://codedamn.com Forum: http://clan.codedamn.com
Views: 7410 codedamn
Angular optional route parameters
 
09:43
Text version of the video http://csharp-video-tutorials.blogspot.com/2018/04/angular-optional-route-parameters.html Slides http://csharp-video-tutorials.blogspot.com/2018/04/angular-optional-route-parameters-slides.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 optional route parameters in Angular with a simple example. On some routes, the route parameters are required and on some routes they are optional. For example, when we navigate from Employees list route to employee details route, the employee id is a required route parameter. Without it, we wouldn't know which employee details to retrieve and display. Let us understand one use case for optional route parameter. If we have just viewed the details of the employee whose ID is 2 and if we navigate back to the employees LIST route, we want to pass the employee ID 2 in the URL as a route parameter to the LIST route, so that specific employee can be styled with a different colour indicating that, we have just viewed his details. On the other hand, if we navigate from the CREATE route to the LIST route, we do not have an employee ID to pass to the LIST route. So the ID has to be an optional route parameter on the LIST route. If the employee ID route parameter is present on the LIST route, then that specific employee panel will be styled with a colour different from the rest of the employees in the list. If the ID route parameter is not present, then all the employee panels will have the same colour. The following route is activated when we navigate from Employee LIST to employee DETAILS. To view a specific employee details, we need his or her ID. Hence in the following route, id is a required route parameter. { path: 'employees/:id', component: EmployeeDetailsComponent } A required route parameter is part of the route definition and is used in route pattern matching. When defining routes, in the route definition, we include a place holder for required route parameter. In the above route definition, ":id" is the placeholder for employee id required route parameter. Now if we want to view the details of an employee whose ID is 2, we will navigate to localhost:4200/employees/2 On the other hand, an optional route parameter is not part of the route definition and is not used in route pattern matching. When defining routes, we do not include a place holder for an optional route parameter like we do for the required route parameter. The following is the route for employee LIST. { path: 'list', component: ListEmployeesComponent } When navigating back to the employee LIST from employee DETAILS, we want to pass the ID of the employee whose DETAILS we have just viewed to the LIST route. So the LIST url, looks as shown below. Notice we are passing 2 as the value for id. In this url id is an optional route parameter. http://localhost:4200/list;id=2 To pass an optional route parameter you use the LINK parameters array as shown below. Notice we are using an object with an optional id parameter. The LIST route works perfectly fine without the id parameter value. If we have the id parameter value, then we style that specific employee with a different colour to indicate he is the employee whose details we have just viewed. <a class="btn btn-primary" [routerLink]="['/list',{id:employee.id}]"> Back to List </a> Reading optional route parameter is very similar to reading required route parameter. We use the same ActivatedRoute service. constructor(private _route: ActivatedRoute) { } ngOnInit() { this.selectedEmployeeId = +this._route.snapshot.paramMap.get('id'); } In the view template (display-employee.component.html), we want to add panel-success bootstrap css class to the employee panel, if the id of the employee being displayed by that panel IS EQUAL TO the value we have in selectedEmployeeId property. <div class="panel panel-primary" [class.panel-success]="selectedEmployeeId === employee.id"> In our next video, we will discuss the differences between optional route parameters and required route parameters and when to use one over the other.
Views: 7036 kudvenkat
Angular 5 setup with SASS, LESS preprocessor tutorial
 
16:33
Setup Angular 5 project to use with SASS (SCSS ) or LESS pre-processors using Angular CLI Article and code samples from this tutorial * https://github.com/techsithgit/ng5-sass.git * techsith.com Please be my patreons on patreaon * https://www.patreon.com/techsith Follow me for technology updates * https://facebook.com/techsith * https://twitter.com/techsith1 Help me translate this video. * http://www.youtube.com/timedtext_video?v=BfcJDiGxt8s&ref=share
Views: 13113 techsith
💥 Learn Angular Template References And How To Configure a Component With Partial Templates
 
06:26
This video is part of the Angular Advanced Library Laboratory: Build Your Own Library Course - https://angular-university.io/course/angular-advanced-course?utm=yt-ll-1-c&grpp=t&couponCode=ANGULAR_LIB_LAB_YOUTUBE In this video we are going to learn about Angular template references, and namely the Angular TemplateRef type. We are going to learn how to inject a reference to a template as an input of a component, and how to use that partial template inside the component. 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: 6258 Angular University
Styling Angular Applications
 
08:24
Angular revolutionizes the way that you architect CSS for modern web applications. But before you can become Angular styling ninjas, you need to take a step back and consider the many different ways that things can be done. In this course, Styling Angular Applications, you'll explore how the framework aligns with web components and what that means for adding styles to components and apps in general. Throughout this course you'll develop systems geared towards organization, scale, and maintainability for HTML and CSS within Angular apps. As you get more comfortable adding and styling components within these systems, you'll consider component themes and the ways that you can transform their look under certain circumstances. By the end of this course, you'll have a strong knowledge of how Angular processes CSS and the many different ways it can be leveraged as part of an overall design system for creating beautiful, organized, maintainable, and future proof web applications. Watch the whole course here: https://app.pluralsight.com/library/courses/styling-angular-applications/table-of-contents?utm_source=youtube&utm_medium=video&utm_campaign=authordemo
Views: 371 brian treese
How to Use Local/Template Variables in Angular 2 // Angular 2 Mastery
 
02:06
🚀 (NEW Channel) Subscribe Here for Daily Online Business Advice: http://bit.ly/NKSubNow --- Local Variables in Angular2 are incredibly powerful & performant if utilized correctly. They allow us to access DOM elements and pass them back to our controller without having to use two-way data binding. Angular 2 has some incredibly powerful tools that we're going to be mastering in the Angular 2 Mastery Course. Template variables inside of angular 2 taken to another level. Clear and easy to understand. Want to Become an Incredible Developer? Go ahead and Subscribe Here to Stay up to date → https://goo.gl/jeBsQT More information, Playlist Links, Courses & Social Media info below! ↓ → In Depth Courses to Take Your Developer Career to the Next Level Nick Kenens's Udemy Courses: http://nickkenens.com/udemy → Amazing Playlists to Help you Become an Amazing Developer Hands-On Coding // Let's Code Together ↓ https://www.youtube.com/playlist?list=PLGvS3P40F7lf61fNLQ4jsTTVuIHS7GOsS Coding Tips // Giving You Tips on How to Code Better ↓ https://www.youtube.com/playlist?list=PLGvS3P40F7lcBmL9RoPmCkANxMF82NL_3 Coding Concepts // Teaching You High-Level Coding Concepts ↓ https://www.youtube.com/playlist?list=PLGvS3P40F7lfivUR7hNDW6amKIE4wTGYS Learning Together // Exploring New Things Together ↓ https://www.youtube.com/playlist?list=PLGvS3P40F7lc8YPzQwDpEwH9gQP0tdMOo Vlog Style // IRL Videos Discussing a Variety of Topics ↓ https://www.youtube.com/playlist?list=PLGvS3P40F7lfOFIpEGFJnoykQGCK8R-3a Q&A // Answering Amazing Questions ↓ https://www.youtube.com/playlist?list=PLGvS3P40F7lfbLuxtf3MoX3V33wXhHcmY Design // Make Things Look Good and Feel Good ↓ https://www.youtube.com/playlist?list=PLGvS3P40F7ldDCRnpsqzifNbE_IXHP0im → Social Media To Stay Connected & Grow Together: Snapchat: http://nickkenens.com/snapchat Instagram: — http://nickkenens.com/instagram LinkedIn: http://nickkenens.com/linkedin → Who’s Nick Kenens and What Can he do For You? Ever since Nick wrote his first line of code, he fell in love with the art of coding & developing things from scratch. Later on in his career, he started discovering a passion for teaching and creating online education videos. What better way to combine these two than making an education based YouTube channel that involves coding? It’s genius, I know. He focuses on different kinds of videos to cover the whole programming spectrum. From Hands-On Coding, Q&A Videos, IRL Videos, Coding tips, Coding concepts, Design videos & Learning new things together. This way he can help you become a better developer, person & thinker all in one place. The goal of this channel is to create a community filled with knowledge-hungry individuals who want to take their coding skills to the next level. Or just people looking to quickly get a handle on coding concepts, design principles and a whole array of skills needed to succeed in today’s development environment. Coding and developing is a thing of beauty and I truly believe that if you have the skills and knowledge required that you can take your life, your career & your happiness to another level. These Hands-On Coding videos will take your coding to the next level by allowing you to look over the shoulder in these coding tutorials. Hands-On videos explaining the ideas and ways of writing code will take your skills as a developer to the next level. See how I write my code and explain it to you along the way. Let me educate you on how to code. Your Hands-On Coding Teacher, Nick Kenens
Views: 1870 Nick Codes
Angular 5 Tutorial in Hindi Part 11: Template Reference Variables in Angular 5 in Hindi
 
10:55
Welcome all, we will see Template Reference Variables in Angular 5 in Hindi. Working with Angular 5 Template Reference Variables. A template reference variable is often a reference to a DOM element within a template. It can also be a reference to an Angular component or directive or a web component. That means you can easily access the variable anywhere in the template. A template reference variable is a way of capturing a reference to a specific element, component or directive so that it can be used somewhere else in the same template. 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/vinodbahadurthapa
Views: 2055 Thapa Technical
Angular5 - Style Binding Tutorial
 
05:22
Angular 4 / 5 - How to perform Style Binding using ngStyle directive
Views: 613 Coders Range
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: 507 Kendo UI
Ionic 4 Theme Builder with CSS Variables
 
12:12
Build a dynamic theme generator with Ionic 4 using nothing but CSS variables. https://angularfirebase.com/lessons/css-variables-in-ionic-4/ - CSS Variables https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables - Coolors.co https://coolors.co/ - Ionic 4 Docs https://ionicframework.com/docs/
Bootstrap 4 by Example - Customizing Sass Variables & Navbar Integration
 
27:59
Course page: https://goo.gl/J7fxoN -- This video contains the middle section of the free course. Visit https://coursetro.com for more. - - - - - - - - - - - - - - - - - - - - - - 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: 35899 DesignCourse
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: 31547 codedamn
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: 20978 LevelUpTuts
Angular 4 Components Properties, Arrays and Objects
 
09:00
Angular 4 QuickStart Tutorial - Part 3 , in this video i will be talking about Angular 4 Components properties like templateUrl, styleUrl, selector and more. I will be also showing how to initialize an Array, Object and display the data. Components Properties and Structure After creating an Angular 4 Component you will notice that it consists of three sections. Component Import Section This is where you import any services needed to be used in that component Component Properties This part is used for setting a lot of component properties like: selector: This can be considered as the component name or identifier which can be used to call the component template. templateUrl: This is where you set the path of the HTML which will be used as an output for that component. styleUrls: Is the property which is used for setting the CSS path for the above mentioned HTML. providers: Which has all list of providers needed for this component “dependencies“. Tips: You can specify HTML directly to templateURL by changing it to template like below example: template: `and write html here` You can also do the same with the stylesUrl by changing it to styles only like below example: styles:` h1 { font-style:italic; } ` Initializing an Object in Angular 4 To initialize an Object this should be done inside the component class car1={ engine: 3.5, model: 2008 , brand: ‘Toyota’ }; To call the car1 brand from the HTML then you specify the object and it’s property {{car1.brand}} Initializing Angular 4 Array To initialize an Array this should be done inside the component class cars = [‘Toyota’, ‘Honda’,’Chevrolet’]; List Array in Angular 4 Listing an Array in Angular 4 can be done using the ‘ngFor’ directive and this will be discussed in later video. Angular 4 QuickStart - Part 1 Create Your First Angular 4 Project https://www.youtube.com/watch?v=DlkR2n4SMMk Angular 4 QuickStart - Part 2 How to Create Component https://www.youtube.com/watch?v=kMo7zkHE3ms
Views: 13463 dotsway
CSS Variables - manipulating them with JavaScript
 
11:22
CSS Variables are awesome, and one of the coolest things we can do with them is dynamcially update them with JavaScript on the fly, which is freakin' incredible, and exactly what we'll be doing in this video! CodePen: https://codepen.io/kevinpowell/pen/47a7913feb4cff477b0c9d7b0fe2008a --- My Code Editor: VS Code - https://code.visualstudio.com/ How my browser refreshes when I save: https://youtu.be/h24noHYsuGc --- Support me on Patreon: https://www.patreon.com/kevinpowell I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Instagram: https://www.instagram.com/kevinpowell.co/ Twitter: https://twitter.com/KevinJPowell Codepen: https://codepen.io/kevinpowell/ Github: https://github.com/kevin-powell
Views: 2818 Kevin Powell
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: 18038 Academind
Angular Tutorial: Angular Component Ep #5 - Template Reference Variable
 
06:42
หากท่านอยากสนับสนุนเรา CMDev Channel ท่านสามารถช่วยเราได้ เพียงแค่แวะเข้าไปชมหลักสูตรของเราที่ www.codemobiles.com ซึ่งหลักสูตรเนื้อหาเข้มข้นมากมาย ทั้งแบบเรียนที่ Office ของ CodeMobiles หรือ แบบเร่งรัดที่เป็น Video Online พร้อม source code เวอร์ชั่นเต็ม พร้อมสามารถปรึกษากับอาจารย์ เมื่อติดปัญหาขณะทำ Workshop ในหลักสูตร ตัวอย่างหลักสูตรของเรา - Angular / NodeJS / Express / MongoDB Programming - ASP .NET Core - Android Programming - iOS Programming - UX/UI - Xamarin Programming - Ionic Programming - Automated Test - Arduino Programming Sourcecode และ วีดีโอ CMDev Channel ช่องสอนเขียนแอพบนมือถือ Android, iOS, Modern Web Technology, IOT and UX/UI โดย http://www.codemobiles.com - Subscribe : http://goo.gl/9K373V - สั่งซื้อ Video พร้อม Source Code : http://goo.gl/hlcM2U - เรียนสดกับอาจารย์ผู้สอน : http://goo.gl/660pFu - พูดคุยแลกเปลี่ยนความคิดเห็นกับเราได้ที่ : https://goo.gl/EjTioc - เช่าห้องอบรม-สัมมนา-เครื่อง Mac : http://goo.gl/7YoOqT Website : http://www.codemobiles.com Facebook : http://www.facebook.com/CodeMobilesTrainingCenter
Views: 951 CMDev
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: 23191 Java Brains
Angular 2 route parameters
 
23:10
Text version of the video http://csharp-video-tutorials.blogspot.com/2017/08/angular-2-route-parameters.html Slides http://csharp-video-tutorials.blogspot.com/2017/08/angular-2-route-parameters_16.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 activatedroute angular2 params activatedroutesnapshot activatedroutesnapshot angular 2 activatedroutesnapshot get url activatedroutesnapshot params activatedroutesnapshot component angular 2 pass parameter to route angular 2 send parameter to component In this video we will discuss passing parameters to routes in Angular. Let us understand this with an example. We want to make Employee Code on Employee List component clickable. When we click on an Employee code, we want to redirect the user to Employee Component which displays that specific employee details. In the URL we will pass the emploee code as a parameter. So clicking on EMP101 will redirect the user to URL (http://localhost/employees/emp101). The Employee component will then read the parameter value from the URL and retrieves that specific employee details by calling the server side web service. In our previous video we have modified the code in app.module.ts file to use hash style routing. Let's remove useHash property, so we are using HTML5 style routing instead of hash style routing. In the root application module (app.module.ts), include the following route. When the user navigates to a URL like (http://localhost:12345/employees/EMP101), we want to display EmployeeComponent. Notice the code parameter specified using colon (:). { path: 'employees/:code', component: EmployeeComponent }, Next, in EmployeeListComponent, modify the [td] element that displays employee code to bind it to the route we created above using the routerLink directive as shown below. [a [routerLink]="['/employees', employee.code]"] {{employee.code | uppercase}} [/a] Explanation of the above code: 1. Notice in this example we are binding routerLink directive to an array. 2. This array is called link parameters array. 3. The first element in the array is the path of the route to the destination component. 4. The second element in the array is the route parameter, in our case the employee code. In the Angular EmployeeService (employee.service.ts), introduce the following getEmployeeByCode() method. getEmployeeByCode(empCode: string): Observable[IEmployee] { return this._http.get("http://localhost:24535/api/employees/" + empCode) .map((response: Response) =] [IEmployee]response.json()) .catch(this.handleError); } Explanation of the above code: 1. This method takes employee code as a parameter and returns that employee object (IEmployee). 2. This method issues a GET request to the Web API service. 3. Once the Web API service returns the employee object, this mehod maps it to IEmployee type and returns it. In one of our previous videos we have created EmployeeComponent to display employee details. When we created this component, we have hard coded employee data in the component itself. Now let's modify it 1. To retrieve employee details by calling the Angular EmployeeService method getEmployeeByCode() we created above. 2. This method calls the server side Web API service which retrieves that specific employee details from the database. 3. The employee code parameter is in the URL 4. To retrieve the parameter from the URL we are using the ActivatedRoute service provided by Angular 5. Since ActivatedRoute is provided as a service inject it into the constructor just like how we have injected EmployeeService There are diiferent approaches to reterieve route parameters values. We will discuss all the different approaches and when to use what in our upcoming videos. Since we need EmployeeService both in EmployeeListComponent and EmployeeComponent, let's register it in the root module so we get a singleton instead of multiple instances of the service. We will discuss what is a Singleton in Angular and why is it important in our next video. For now, let's remove the EmployeeService registration from EmployeeListComponent by removing the following providers property in employeeList.component.ts file providers: [EmployeeService] Now regsiter the EmployeeService in application root module (app.module.ts) by including it in the providers property of @NgModule decorator.
Views: 49494 kudvenkat
Angular ngFor directive
 
09:10
Text version of the video http://csharp-video-tutorials.blogspot.com/2017/07/angular-ngfor-directive.html Slides http://csharp-video-tutorials.blogspot.com/2017/07/angular-ngfor-directive_12.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 another structural directive - ngFor in Angular. Let us understand ngFor structural directive with an example. Consider the following array of Employee objects. employees : any[]= [ { code: 'emp101', name: 'Tom', gender: 'Male', annualSalary: 5500, dateOfBirth: '25/6/1988' }, { code: 'emp102', name: 'Alex', gender: 'Male', annualSalary: 5700.95, dateOfBirth: '9/6/1982' }, { code: 'emp103', name: 'Mike', gender: 'Male', annualSalary: 5900, dateOfBirth: '12/8/1979' }, { code: 'emp104', name: 'Mary', gender: 'Female', annualSalary: 6500.826, dateOfBirth: '14/10/1980' }, ]; We want to display these employees in a table on a web page. Step 1 : Add a new TypeScript file to the "employee" folder. Name it employeeList.component.ts. Copy and paste the following code in it. import { Component } from '@angular/core'; @Component({ selector: 'list-employee', templateUrl: 'app/employee/employeeList.component.html', styleUrls: ['app/employee/employeeList.component.css'] }) export class EmployeeListComponent { employees : any[]= [ { code: 'emp101', name: 'Tom', gender: 'Male', annualSalary: 5500, dateOfBirth: '25/6/1988' }, { code: 'emp102', name: 'Alex', gender: 'Male', annualSalary: 5700.95, dateOfBirth: '9/6/1982' }, { code: 'emp103', name: 'Mike', gender: 'Male', annualSalary: 5900, dateOfBirth: '12/8/1979' }, { code: 'emp104', name: 'Mary', gender: 'Female', annualSalary: 6500.826, dateOfBirth: '14/10/1980' }, ]; } Step 2 : Add a new HTML page to the "employee" folder. Name it employeeList.component.html. Copy and paste the following code in it. Please note : 1. ngFor is usually used to display an array of items 2. Since ngFor is a structutal directive it is prefixed with * 3. *ngFor='let employee of employees' - In this example 'employee' is called template input variable, which can be accessed by the 4. [tr] element and any of it's child elements. 5. ngIf structural directive displays the row "No employees to display" when employees property does not exist or when there are ZERO employees in the array. [table] [thead] [tr] [th]Code[/th] [th]Name[/th] [th]Gender[/th] [th]Annual Salary[/th] [th]Date of Birth[/th] [/tr] [/thead] [tbody] [tr *ngFor='let employee of employees'] [td]{{employee.code}}[/td] [td]{{employee.name}}[/td] [td]{{employee.gender}}[/td] [td]{{employee.annualSalary}}[/td] [td]{{employee.dateOfBirth}}[/td] [/tr] [tr *ngIf="!employees || employees.length==0"] [td colspan="5"] No employees to display [/td] [/tr] [/tbody] [/table] Step 3 : Add a new StyleSheet to the "employee" folder. Name it employeeList.component.css. Copy and paste the following code in it. table { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: large; border-collapse: collapse; } td { border: 1px solid #369; padding:5px; } th{ border: 1px solid #369; padding:5px; } Step 4 : In the root module, i.e app.module.ts, import employeeList component and add it to the declarations array as shown below. import { EmployeeListComponent } from './employee/employeeList.component'; @NgModule({ imports: [BrowserModule], declarations: [AppComponent, EmployeeComponent, EmployeeListComponent], bootstrap: [AppComponent] }) export class AppModule { } Step 5 : In the root component, i.e app.component.ts use employeeList component as a directive @Component({ selector: 'my-app', template: `[list-employee][/list-employee] ` }) At this point, run the application and notice the employees are displayed in the table as expected.
Views: 78912 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: 715 Theodore Anderson
💥 Angular Components Tutorial For Beginners - Component Templates - Inline Vs External
 
02:55
Check out our Angular for Beginners Free Course - https://angular-university.io/course/getting-started-with-angular2?utm=yt-free-course In this Angular tutorial, we are going to learn how a component template can be defined both inline and in an external file. We are going to learn how to configure the component so that Angular can find the template at the correct location, using the module commonjs variable. We are going to learn also some best practices for component naming, from the official Angular Style Guide. For more videos tutorials on Angular, have a look at the courses available at 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: 1556 Angular University
Ionic App Theme Tutorial - Customize your app the right way!
 
15:40
Written Tutorial: https://goo.gl/ob861y Subscribe here and check out https://coursetro.com for more. Learn how to use Sass variables to properly and quickly customize your Ionic app theme. Take all of my courses for the cost of buying me a 6 pack! http://coursetro.com/courses (A bunch are free, too) All of my courses are available at Udemy, too! https://www.udemy.com/user/garysimon2/ Want to use my console / theme?: https://www.youtube.com/watch?v=x8uR3gqU0Bg Follow me: 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: 49344 DesignCourse
AngularJS ng-class
 
05:57
ngClass makes applying conditional CSS classes a breeze.
Views: 12356 Joe Maddalone
Angular 2 : Styling a component
 
06:12
In this video, you will learn how to style a component using styles and styleUrls metadata.
Views: 395 GeekHours
[IONIC 4] Styling a Shadow DOM in Ionic #ionic #angular
 
14:46
In this video tutorial, we explore the benefits and limitations of Shadow DOM in Ionic. Mentioned in this video: - Shadow DOM Usage in Ionic Web Components (https://www.joshmorony.com/shadow-dom-usage-in-ionic-web-components) - Understanding How Slots are Used in Ionic (https://www.joshmorony.com/understanding-how-slots-are-used-in-ionic-4/) - Learn Ionic: https://www.joshmorony.com/building-mobile-apps-with-ionic-2/ - Find me on Twitter: https://twitter.com/joshuamorony - More Ionic tutorials: https://www.joshmorony.com/blog/
Views: 5139 Joshua Morony
Angular 2 - Inputs - Communicate from Parent to Child Component
 
08:07
Angular 2+ Essential Training: https://goo.gl/yjQPIu Repo: https://goo.gl/2Rrt2g Learn how to use @Input in Angular 2 to send data to a child component. Components, as we’ve learned, are at the heart of Angular. When composing our application our components form a tree-like structure in which components become nested. These nested or Child components need a way of receiving data from its parent as well as sending data back to its parent. In order to accomplish this Angular provides us with Inputs and Outputs. Lets first focus on Inputs. Input is a decorator used inside a child component that allows data to flow from a parent component to a child component. Whenever a nested component wants to receive input from its container, it must expose a property next to an Input decorator. And this exposed property gets binded to a value in the parent. So inside of our child component we first need to import the Input decorator. And then inside our class we invoke our Input here. And then we create a property of whatever we want, in this case named reviews. This property name can be anything, and you can think of it like a variable that’s going to represent some value we get from the parent. And then we need to define its type, which in this case is a number. This property called reviews is going to contain a number of reviews given to us by the parent. In our current application we’re displaying the number of book reviews in our template using book.bookReviews and property in our class looks like this. Now the way we’re able to gain reference to bookReviews in our child component is by creating a binding inside of our child selector. So inside our parentComponent html file here we add in our child selector referencing the child component and then add a binding. We wrap the reviews property we defined in square brackets and then set it equal to a value inside the parent. So now our reviews child property has been assigned the value of bookReviews. And this means that inside of our child html file we can now reference the reviews property which is going to be populated with parent value. So if we we’re using interpolation here, we would see the number 15 displayed in our child template. Lets now practice using Inputs inside of our application.
Views: 29334 JsWiz
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: 48191 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: 3556 GeekHours
14. Curso de Angular [ Tutorial Angular ] - Template variable
 
03:28
REDES SOCIALES: ►Síguenos en FACEBOOK: https://www.facebook.com/CodigoMentor/ ►Sitio Web: http://www.codigomentor.com - Curso de Angular desde Cero, Paso a paso, empezando por instalar el entorno con Node.js, Visual Studio Code, y Angular-CLI. En este curso aprenderas lo nuevo de la tecnología web. - Angular desde cero - Tutorial Angular -Tutorial de Angular en Español - Tutorial de Angular desde cero - Web Development - Desarrolo Web - Angular 2 - Angular 4 - Angular 5 - Angular para principiantes - Angular: Components, Services (Http), Directive, Pipes. Nuestros cursos: - Curso de jQuery: https://www.youtube.com/watch?v=i_gxsd-_qHE&list=PLK7sa90aSLe6hcBwaZsW6m0h1RQEdml9G - Curso de JDBC: https://www.youtube.com/watch?v=wpQjmEZjdiY&list=PLK7sa90aSLe7zjYeuVRRLJYPQXQ0cdEwY - Curso de HTML: https://www.youtube.com/watch?v=-acrfv3zsMo&list=PLK7sa90aSLe5Hve1yXYFWlK4cOxvjmv64 - Curso de Java: https://www.youtube.com/watch?v=8de_cok2Jk4&list=PLK7sa90aSLe7Xk-9DsZhGzhMpx9tOs47r - Curso de AJAX: https://www.youtube.com/watch?v=bUwadY1yqi0&list=PLK7sa90aSLe74eFKxktrvzMeXA1zilxaT - Curso de JavaScript: https://www.youtube.com/watch?v=pLUDsCbWznQ&list=PLK7sa90aSLe5Ma-nqZoC9qzQqjJLxS6RH - Curso de JSON: https://www.youtube.com/watch?v=iCoTo6n1DYw&list=PLK7sa90aSLe7WJBIy4FGj8Zd6BpfYRaSv
Views: 1712 CodigoMentor
Conditional Attributes, Styles, and Classes in Ionic
 
11:32
In this video tutorial, we take a look at how to conditionally apply attributes, styles, and classes to elements in Ionic . Blog post: https://www.joshmorony.com/conditional-attributes-styles-and-classes-in-ionic-2/ Learn Ionic: https://www.joshmorony.com/building-mobile-apps-with-ionic-2/
Views: 9744 Joshua Morony
Angular 2 Beginner Tutorial #8 : Angular Reference Variable and Reacting to DOM events
 
09:21
This video shows how to react on DOM events in Angular. It also introduces Angular reference variable and its usage.
Views: 120 Xpose Ideas
Angular 7 Tutorial - 9 - Event Binding
 
05:19
Support - https://www.paypal.me/Codevolution Facebook - https://www.facebook.com/codevolutionweb Github - https://github.com/gopinav Angular | Angular Tutorial for Beginners | Angular Event Binding
Views: 87098 Codevolution
Angular 6 Basics 12 - Using ngIf
 
04:36
Access the full course here: https://javabrains.io/courses/angular_basics Learn how to conditionally include DOM elements in your component based on component data using the `ngIf` directive. 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: 16439 Java Brains
Angular 2 Tutorial #14 - Custom Property Binding (& @Input)
 
06:05
Yo gang, in this Angular 2 tutorial, we'll take a look at custom property bindings and how they can help us pass data from one components into another. To do this we'll also have to use the @Input decorator too. ----- COURSE LINKS: + Repo - https://github.com/iamshaunjp/angular-2-playlist + Atom editor - https://atom.io/ + Download Node.js - https://nodejs.org/en/ --------------------------------------------------------------------------------------------- You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage... SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1 ========== PSD to WordPress Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gnow7e45LQFkNVxwQ5BH-W ============ Node.js for Beginners Playlist ============= https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp ============== The Net Ninja ===================== For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ================== Social Links ================== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk
Views: 31821 The Net Ninja
AngularJS routeparams example
 
14:12
angularjs parameters from url angularjs url parameters to controller angular access url parameters angularjs http get url parameters pass parameter in angularjs angularjs http get parameters example angularjs http url parameters angularjs retrieve parameters angularjs http get with parameters angularjs $routeparams example how to pass parameters in url in angularjs In this video we will discuss how to pass and retrieve parameters from URL in AngularJS. This is continuation to Part 29. Please watch Part 29 from AngularJS Tutorial before proceeding. Here is what we want to do : When we navigate to /students, the list of student names must be displayed as hyperlinks. When we click on any student name, the respective student details should be displayed. When we click on "Back to Students list" it should take us back to students list page. Here are the steps to achieve this Step 1 : The first step is to add a Web Method to our ASP.NET web service, which will retrieve student by their id. Add the following Web Method in StudentService.asmx.cs [WebMethod] public void GetStudent(int id) { Student student = new Student(); string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString; using (SqlConnection con = new SqlConnection(cs)) { SqlCommand cmd = new SqlCommand("Select * from tblStudents where id = @id", con); SqlParameter param = new SqlParameter() { ParameterName = "@id", Value = id }; cmd.Parameters.Add(param); con.Open(); SqlDataReader rdr = cmd.ExecuteReader(); while (rdr.Read()) { student.id = Convert.ToInt32(rdr["Id"]); student.name = rdr["Name"].ToString(); student.gender = rdr["Gender"].ToString(); student.city = rdr["City"].ToString(); } } JavaScriptSerializer js = new JavaScriptSerializer(); Context.Response.Write(js.Serialize(student)); } Step 2 : Change the HTML in students.html partial template as shown below. Notice student name is now wrapped in an anchor tag. This will display student name as a hyperlink. If you click on a student name with id = 1, then we will be redirected to /students/1 [h1]List of Students[/h1] [ul] [li ng-repeat="student in students"] [a href="students/{{student.id}}"] {{student.name}} [/a] [/li] [/ul] Step 3 : Now let's create an angularjs route with parameters. Add the following route in script.js file. Our next step is to create studentDetails.html partial template and studentDetailsController. .when("/students/:id", { templateUrl: "Templates/studentDetails.html", controller: "studentDetailsController" }) Step 4 : Right click on Templates folder in solution explorer and add a new HTMLpage. Name it studentDetails.html. Copy and paste the following HTML. [h1]Student Details[/h1] [table style="border:1px solid black"] [tr] [td]Id[/td] [td]{{student.id}}[/td] [/tr] [tr] [td]Name[/td] [td]{{student.name}}[/td] [/tr] [tr] [td]Gender[/td] [td]{{student.gender}}[/td] [/tr] [tr] [td]City[/td] [td]{{student.city}}[/td] [/tr] [/table] [h4][a href="students"]Back to Students list[/a][/h4] Step 5 : Add studentDetailsController in script.js which calls GetStudent web method and returns the requested student data. .controller("studentDetailsController", function ($scope, $http, $routeParams) { $http({ url: "StudentService.asmx/GetStudent", method: "get", params: { id: $routeParams.id } }).then(function (response) { $scope.student = response.data; }) }) Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2016/03/angularjs-routeparams-example.html
Views: 107658 kudvenkat
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: 88684 kudvenkat
JavaScript Let vs Var vs Constant | Mosh
 
06:51
JavaScript Let vs Var vs Constant - 🔥Get the COMPLETE course (83% OFF - LIMITED TIME ONLY): http://bit.ly/2M1sp4B Subscribe for more videos: https://www.youtube.com/channel/UCWv7vMbMWH4-V0ZXdmDpPBA?sub_confirmation=1 Want to learn more from me? Check out my blog and courses: http://programmingwithmosh.com https://www.facebook.com/programmingwithmosh/ https://twitter.com/moshhamedani
Views: 19206 Programming with Mosh
Handling events in AngularJS
 
07:57
event handling in angularjs angularjs ng click example angularjs ng click event In this video we will discuss how to handle events in AngularJS. Let us understand with an example. Here is what we want to do. 1. Display the list of technologies in a table 2. Provide the ability to ike and dislike a technology 3. Increment the likes and dislikes when the respective buttons are clicked Script.js : In the controller function we have 2 methods to increment likes and dislikes. Both the functions have the technology object that we want to like or dislike as a parameter. var app = angular .module("myModule", []) .controller("myController", function ($scope) { var technologies = [ { name:"C#", likes:0, dislikes:0 }, { name: "ASP.NET", likes: 0, dislikes: 0 }, { name: "SQL", likes: 0, dislikes: 0 }, { name: "AngularJS", likes: 0, dislikes: 0 } ]; $scope.technologies = technologies; $scope.incrementLikes = function (technology) { technology.likes++; }; $scope.incrementDislikes = function (technology) { technology.dislikes++; }; }); HtmlPage1.html : Notice in the html below, we are associating incrementLikes() and incrementDislikes() functions with the respective button. When any of these buttons are clicked, the corresponsing technology object is automatically passed to the function, and the likes or dislikes property is incremented depending on which button is clicked. [!DOCTYPE html] [html xmlns="http://www.w3.org/1999/xhtml"] [head] [title][/title] [script src="Scripts/angular.min.js"][/script] [script src="Scripts/Script.js"][/script] [link href="Styles.css" rel="stylesheet" /] [/head] [body ng-app="myModule"] [div ng-controller="myController"] [table] [thead] [tr] [th]Name[/th] [th]Likes[/th] [th]Dislikes[/th] [th]Like/Dislike[/th] [/tr] [/thead] [tbody] [tr ng-repeat="technology in technologies"] [td] {{ technology.name }} [/td] [td style="text-align:center"] {{ technology.likes }} [/td] [td style="text-align:center"] {{ technology.dislikes }} [/td] [td] [input type="button" ng-click="incrementLikes(technology)" value="Like" /] [input type="button" ng-click="incrementDislikes(technology)" value="Dislike" /] [/td] [/tr] [/tbody] [/table] [/div] [/body] [/html] Styles.css : Styles for table, td and th elements table { border-collapse: collapse; font-family:Arial; } td { border: 1px solid black; padding: 5px; } th { border: 1px solid black; padding: 5px; text-align: left; } Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/11/handling-events-in-angularjs.html
Views: 329188 kudvenkat

Vermisen albendazole 400mg price
Ecosocialism 2013 gmc
Generic viagra ratings
Fluoxetine neuraxpharm 20 mg tabletten gripsstad
Ranitidine 150 mg precious stones