Home
Search results “Angular style variable”
Angular 4 Style Binding
 
04:02
This video is from my Free Angular 4 Course: https://goo.gl/T5fqeB Written tutorial: https://goo.gl/7bXgqe http://coursetro.com for more! - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS weekly! My Patreon: https://www.patreon.com/designcourse 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: 19139 DesignCourse
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 Patreon: https://www.patreon.com/designcourse 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: 19233 DesignCourse
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: 53626 thenewboston
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: 61069 kudvenkat
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: 62833 Codevolution
AngularJS #5 | Dynamic Css Using AngularJS variable
 
06:43
Using angularJS with css to make dynamic webpage style, Open your mind.
Views: 550 Egypt on Rails
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/
Views: 9630 Angular Firebase
Part 3 - Working with Typescript Variable declarations and Types
 
10:52
In this video we will be understanding and Working with Typescript Variable declarations and Types. #ExecuteAutomation #VisualStudio #Typescript #ExecuteAutomation #JS Please hit like and share your comments about the video !!! For more videos and articles visit http://www.executeautomation.com Subscribe: ExecuteAutomation channel in Youtube !!!
Views: 5078 Execute Automation
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: 835 CMDev
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: 6802 Joshua Morony
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: 170 Kendo UI
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: 29695 codedamn
💥 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: 5667 Angular University
Angular 5 - Class Binding Tutorial
 
08:17
Angular 4 / 5 - How to perform Class Binding using ngClass directive
Views: 871 Coders Range
The Future of Web Fonts looks Awesome - Variable Font Tutorial
 
15:23
Today's Question: How do you stay focused while working? -- In this video, we're going to take a look at variable fonts, which are a new type of font that gives us an amazing level of control over a variety of factors using CSS. I'm going to show you how to find and use variable fonts with the help of a couple resources. Variable fonts give designers an entirely new level of control over web typography. Article mentioned in the video: https://medium.com/clear-left-thinking/how-to-use-variable-fonts-in-the-real-world-e6d73065a604 Let's get started! - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS weekly! My Patreon: https://www.patreon.com/designcourse 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: 9294 DesignCourse
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: 11659 techsith
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: 1045 iEatWebsites
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: 985 Michael Jasper
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: 1530 Thapa Technical
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: 12304 dotsway
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: 34214 Traversy Media
Angular Components In Depth 18 - Using ngClass
 
08:08
Access the full course here: https://javabrains.io/courses/angular_componentsindepth Learn how to use ngClass to dynamically and conditionally style Angular components based on component member variable or expression results. This course is a deep dive into components in Angular. Learn about the various features of Angular components and powerful ways of customizing your component's behaviors - Event handling, view children, change detection, content projection and more!
Views: 352 Java Brains
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: 669 Theodore Anderson
AngularJS ng-class
 
05:57
ngClass makes applying conditional CSS classes a breeze.
Views: 12151 Joe Maddalone
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: 44887 kudvenkat
Angular ngFor trackBy
 
11:32
Text version of the video http://csharp-video-tutorials.blogspot.com/2017/07/angular-ngfor-trackby.html Slides http://csharp-video-tutorials.blogspot.com/2017/07/angular-ngfor-trackby_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 1. Using trackyBy with ngFor directive 2. How to get the index of an item in a collection 3. Identifying the first and the last elements in a collection 4. Identifying even and odd elements in a collection Using trackyBy with ngFor directive : ngFor directive may perform poorly with large lists A small change to the list like, adding a new item or removing an existing item may trigger a cascade of DOM manipulations For example, consider this code in employeeList.component.ts The constructor() initialises the employees property with 4 employee objects getEmployees() method returns another list of 5 employee objects (The 4 existing employees plus a new employee object) Now look at this code in employeeList.component.html [table] [thead] [tr] [/tr] [/thead] [tbody] [tr *ngFor='let employee of employees'] [/tr] [tr *ngIf="!employees || employees.length==0"] [td colspan="5"] No employees to display [/td] [/tr] [/tbody] [/table] [br /] [button (click)='getEmployees()']Refresh Employees[/button] 1. At the moment we are not using trackBy with ngFor directive 2. When the page initially loads we see the 4 employees 3. When we click "Refresh Employees" button we see the fifth employee as well 4. It looks like it just added the additional row for the fifth employee. That's not true, it effectively teared down all the [tr] and [td] elements of all the employees and recreated them. 5. To prove this launch browser developer tools by pressing F12. 6. Click on the "Elements" tab and expand the [table] and then [tbody] elements 7. At this point click the "Refresh Emplyees" button and you will notice all the [tr] elements are briefly highlighted indicating they are teared down and recreated. This happens because Angular by defualt keeps track of objects using the object references. When we click the "Refresh Employees" button we get different object references and as a result Angular has no choice but to tear down all the old DOM elements and insert the new DOM elements. Angular can avoid this churn with trackBy. The trackBy function takes the index and the current item as arguments and returns the unique identifier by which that item should be tracked. In our case we are tracking by Employee code. Add this method to employeeList.component.ts. trackByEmpCode(index: number, employee: any): string { return employee.code; } Make the following change in employeeList.component.html : Notice along with ngFor we also specified trackBy [tr *ngFor='let employee of employees; trackBy:trackByEmpCode'] At this point, run the application and lauch developer tools. When you click "Refresh Employees" first time, only the the row of the fifth employee is highlighted indicating only that[tr] element is added. On subsequent clicks, nothing is highlighted meaning none of the [tr] elements are teared down or added as the employees collection has not changed. Even now we get different object references when we click "Refresh Employees" button, but as Angular is now tracking employee objects using the employee code instead of object references, the respective DOM elements are not affected. How to get the index of an item in a collection : In the example below, we are using the index property of the NgFor directive to store the index in a template input variable "i". The variable is then used in the [td] element where we want to display the index. We used the let keyword to create the template input variable "i". The index of an element is extremely useful when creating the HTML elements dynamically. We will discuss creating HTML elements dynamically in our upcoming videos. [tr *ngFor='let employee of employees; let i=index'] Identifying the first and the last element in a collection : Use the first and last properties of the ngFor directive to find if an element is the first or last element respectively. Identifying even and odd element in a collection : This is similar to identifying first and last element in a collection. Instead of using first and last properties, use even and odd properties.
Views: 67155 kudvenkat
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: 1820 Nick Codes
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: 2363 Kevin Powell
Quickly and Easily Create Custom Scrollbars that Look Awesome
 
13:28
Today's Question: Do you use a Mac or PC for design and/or coding? -- In today's tutorial, we're going to use something called "simplebar" to very easily create custom scrollbars. This will help us get rid of the "one size fits all" default scrollbar, and create one that's more cohesive and consistent with your UI design. Simplebar: https://github.com/Grsmto/simplebar - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS weekly! My Patreon: https://www.patreon.com/designcourse 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: 10257 DesignCourse
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: 105073 kudvenkat
💥 Learn An Angular CSS Extension Feature  - The Host Pseudo Selector
 
04:29
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 In the previous video, we saw the Angular component styling isolation mechanism in action, which isolates certain styles inside the template. This is a great feature, but the problem is that sometimes we want to add a style to the host element itself. For that, we have available a series of CSS extensions pseudo-selectors, and one of them is host pseudo selector that we will cover in this video. 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: 5011 Angular University
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 Patreon: https://www.patreon.com/designcourse 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: 33229 DesignCourse
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: 321006 kudvenkat
6  angular 6 with firebase
 
15:08
دورة Angular 6 من الصفر مع بناء مشروع كامل انكولار 6 هو فريمورك لعمل تطبيقات الويب و الموبايل تستطيع عمل تطبيقات تعمل على جميع المنصات وتدعم جميع المنصات و لها مميزات كثيرة و التطوير فيها اسرع و تطبيقات اسرع مبنية على جافاسكريبت النسخة الحديثة و typescript حيث قام مطورو شركة كوكل بتطويره لتسهيل العمل على عدد من المشاريع وتطبيقات الويب أحادية الصفحة Single Page Applications. تم شرح : 1 – Architecture Overview 2 – Angular libraries 3 – Components 4 – Templates 5 – Metadata 6 – Data binding 7 – Directives 8 – Route 9 – Dependency injection 10- Displaying Data 11- Constructor or variable initialization 12- array property 13- Creating a class for the data 14- Conditional display with NgIf 15- Interpolation 16- Template expressions 17- Expression context 18- Template statements 19- Statement context 20- Binding syntax 21- HTML attribute 22- DOM property 23- Property binding 24- Attribute binding 25- JSON formats 26- Style binding 27- Event binding 28- Two-way binding 29- Built-in directives 30- Objects 31- NgIf 32- NgFor 33- undefined property 34- Input and output properties 35- The pipe operator ( | ) 36- safe navigation operator ( ?. ) and null 37- Component Interaction 38- Component Styles 39- Dynamic component loading 40- Attribute Directives 41- Structural Directives 42- NgModel 43- Forms 44- Dependency Injection 45- Activated Route 46- Routing & Navigation 47- firebase 48- firebase Database realtime 49- Authentication 50- final project
Views: 3537 Muhammed Essa
#11 Ng-Style
 
10:13
Holla ketemu lagi dengan w. Pada kesempatan kali ini w akan ngebahas bagaimana menggunakan ng-style pada angular ionic. So stay tune with me guys.. ============================================ FP: https://web.facebook.com/tutorialionicindo/
Views: 1399 HRVlogs
Angular Interview Questions - Template Input vs Template Reference Variables | Part 3
 
12:13
In this video, I have explained the difference between a Template Input and Template Reference variable along with a code example. Please Like and Share the video if you think it is helpful for you. Also please take a moment to subscribe to my channel to show your support and to be the first to know about the new video updates. Feel free to use the comments section for questions, suggestions or just to say Hi :) Follow me on Twitter: https://twitter.com/_nitij
Views: 47 Code First
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: 118 Xpose Ideas
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: 320 brian treese
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: 80624 kudvenkat
Angular 7 Tutorial - 11 - Two Way Binding
 
04:29
Support - https://www.paypal.me/Codevolution Facebook - https://www.facebook.com/codevolutionweb Github - https://github.com/gopinav Angular | Angular Tutorial for Beginners | Angular Two Way Binding
Views: 67675 Codevolution
22  Angular 4 CSS manipulate
 
15:59
ملفات المشروع على الرابط التالي : https://www.dropbox.com/s/7v1bqrgcvvprts8/total.zip?dl=0 لمزيد من الدروس على الرابط التالي : http://muhammedessa.com/angular-4-zero-to-hero/ ملف ال json --------------------------------- { "employees" : { "-Muh_aSRah7kJewq8C29" : { "firstName" : "Muhammed", "lastName" : "Essa", "email" : "[email protected]", "country" : "iraq", "city" : "kirkuk", "phone" : "123-456-7890", "salary" : "10000.00" }, "-Muh_bZAvh7kiazx6D13" : { "firstName" : "Ahmed", "lastName" : "Essa", "email" : "[email protected]", "country" : "iraq", "city" : "basra", "phone" : "111-222-3333", "salary" : "12000.00" }, "-Muh_bXAvh3sdfjk7S65" : { "firstName" : "Usama", "lastName" : "Essa", "email" : "[email protected]", "country" : "iraq", "city" : "baghdad", "phone" : "888-777-6699", "salary" : "130000.00" } } }
Views: 3282 Muhammed Essa
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: 13701 Java Brains
Angular 2 Tutorial (2016) - Setting up the Development Environment
 
04:49
Want much more Angular 2? Also check out my brand-new Udemy course, which will go into much more detail than this video series. Get it now for only $15: https://www.udemy.com/the-complete-guide-to-angular-2/?couponCode=YOUTUBE_2 Angular 2 Tutorial which guides you how to setup your Angular 2 development environment. Boilerplate Github repository available here: https://github.com/mschwarzmueller/angular-2-beta-boilerplate.git Want to get some 1-on-1 coaching with experienced developers? Have a look at Savvy: https://www.savvy.is/?ref=9fee2b (Discount Code 9fee2b) You can follow me on Twitter (@maxedapps), Facebook (https://www.facebook.com/academindchannel/) or visit our Website (https://www.academind.com). You may learn more about the Angular 2 Development Environment in this article: https://angular.io/docs/ts/latest/quickstart.html Get into developing Angular 2 applications instantly! Please share, like and comment if you like the video! This course will teach you all the fundamentals of the current Angular 2 Beta and will prepare you to write actual Angular 2 web applications. We will cover Directives, Components, Template Syntax, Two-Way-Data Binding, Services, HTTP (GET and POST) and much more! In order to get the most out of this course be sure to use my prepared GitHub Repository as a Boilerplate: https://github.com/mschwarzmueller/angular-2-beta-boilerplate.git Have fun and please leave a like or comment if you like (or dislike) this video or this series! You may learn more about the Angular 2 Development Environment in this article: https://angular.io/docs/ts/latest/quickstart.html
Views: 104915 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: 939 Filip Jerga
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: 71651 kudvenkat
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: 13073 Academind
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: 40291 kudvenkat

Us department of state authentication cover letter
Data analysis dissertation help free
Quality writing service
How to start a cover letter engineering intern
Win32 toolbar searchsuite application letters