Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.
Angular 1 provided a mechanism to place content from your template inside of another template called transclusion. This concept has been brought into Angular 2 and was renamed to content projection...
Generating components with the Angular CLI allows for scaffolding applications quickly. Learn what will be generated for you and how to generate quickly with shortcuts in the desired directory.
Getting started with angular development can be difficult, with a lot of moving parts. Allow the Angular CLI to handle those complexities so you can focus on creating great applications. In this l...
Angular 2 has many new moving parts, but the basics still focus on Components with templates, properties, events, and styles. This lesson walks through the template syntax and features inside of th...
This lesson shows you how to build a Toggle Button in Angular 2 from scratch. It covers using transclusion in Angular 2, setting up your own two-way binding, and making the button into a reusable c...
The Async Pipe in Angular 2 can reduce boilerplate and mental overhead when dealing with observables and promises. This lesson explores how the Async Pipe works, the code it eliminates, and demonst...
@ngrx/store builds on the concepts made popular by Redux and supercharges it with the backing of RxJS. The result is a tool and philosophy that will transform the way you approach state management ...
WebStorm can easily help you set up a new Angular 2 project with never even touching a terminal. This lesson shows you all the neat GUI tricks you need to know to get up and running.
This lessons shows one way to structure your project by feature and how all you need to do is update your import statements.
This lessons implements the Search Pipe with a new SearchBox component so you can search through each todo. It also demonstrates the patterns used for components to interact with each other. Often ...
This lesson walks you through building a component using ngFor on a select dropdown with options to pass in a param into the Pipe.
showing All 143 lessons...
Just like passing in an array to
*ngFor, you can pass in any value into your structural directive so that it can render templates based on those values. It's crucial to understand how the
*directive syntax expands into a
<template> and adds a custom
@Input based on the syntax you use so that you can use your own data.
You can change behaviors of element and
@Component properties based on services using
@Directives. This allows you to build
@Directives which rely on services to change behavior without the
@Component ever needing to know that the Service even exists.
Structural directives enable you to use an element as a template for creating additional elements. Creating structural directives requires a knowledge of
<template> elements, but they're easy and extremely powerful once you undrestand the concepts.
@Directive is used to add behavior to elements and components in your application. This makes
@Directives ideal for behaviors such as "tracking" which don't belong in a Component, but do belong as a behavior in your application.
@Input decorator allows you to pass values into your
@Directive so that you can change the value of the Directive each time that it is used. Using
@Input makes your Directives much more flexible and reusable so they can adapt to many different situations.
Learn how to programmatically change the status bar text color on iOS and Android as well as the background color. The lesson also covers how to adjust the text color to be dark on Android in cases where the status bar color may be light.
Learn how to extend the SASS that ships with the nativescript-theme-core plugin to create your very own custom app theme. The setup takes advantage of common styling across iOS and Android as well as how to handle platform specific css. You can find a full list of SASS variables that can be overridden here: https://github.com/NativeScript/theme/blob/master/app/scss/_variables.scss You can also find a full list of baseline variable sets to base custom stylesheets within this section on the docs: http://docs.nativescript.org/ui/theme#color-schemes
Learn how use the nativescript-themes plugin to swap out entire stylesheets on the fly to provide theme switching for your app's users. Also covers how to ensure your app remembers which theme the user chose last before the app closed to apply their preferred theme next time they open it.
Let’s build a new Angular component and use NativeScript for Angular’s ModalDialogService to open it in a native modal. We will also look at special considerations with handling the close action in addition to passing data between the modal and the caller.
The default core theme comes preinstalled and ready to go with every new project. Learn how to use some of the many helpful utility classes that are provided like common
btn classes for Buttons,
h2, etc. Label classes and convenient
m-10 (shorthand margin/padding) classes ranging from 0 - 30. You can learn all about the rich options you get here: http://docs.nativescript.org/ui/theme
Let’s learn how to style those native views with CSS and understand a few things that are unique to the native platforms regarding styling. A good majority of standard web CSS properties are supported with the addition of a few like
horizontal-align that are unique to native platforms.
This is the fundamental building block for native views. Let’s understand the syntax and some of the options available to us to construct our views starting with Layout Containers. StackLayout and GridLayout containers are the most commonly used. Also learn about helpful snippets for a few popular IDE’s.
We can run our app in an Android emulator using GenyMotion, which provides flexible options and great performance. Let’s learn how to set one up and run our app in it. First install the Android SDK by installing Android Studio here: https://developer.android.com/studio/index.html. Then register for a GenyMotion account here: https://www.genymotion.com/account/create/. Once created and logged in, you will see a ‘Download’ button in the header where you can download the free tools.
We can run our app in the iOS Simulator using the
tns command line utilities. Also learn how to target specific simulator devices and versions. You must have a Mac to develop apps for iOS. Ensure you have XCode installed via the Mac App Store, and ensure you have opened it at least once to agree to the terms and install the additional components it may prompt about.
A common use-case for an Angular 2 animation is to animate an element into the DOM. This is achieved with a combination of ngIf and the “void” state so that you have complete control over how the element appears and how it leaves.
The foundation of animation in Angular 2 is using transitions to move from one state to another state. Transitions bring in the concept of time and how long it should take to go from one state to the next while they almost magically calculate the difference in values over time between the CSS properties of each state.
Each trigger starts with an “undefined” state or a “void” state which doesn’t match any of your currently defined states. You have to be aware of when you’re in that state so that you don’t stumble on any undesired behaviors. This is especially important if your transitions cover “*”/all states because “void” is part of “all”.
Triggers are a special type of directive prefixed with an “@” that allow your elements to be bound to defined animations in the @Component decorator. Each trigger is represented by a defined animation trigger and each trigger can support many states.
Angular 1 provided a mechanism to place content from your template inside of another template called transclusion. This concept has been brought into Angular 2 and was renamed to content projection and given super powers.
In this lesson learn how to setup content projection and upgrade it to support multiple projections with encapsulated functionality.
Getting started with angular development can be difficult, with a lot of moving parts. Allow the Angular CLI to handle those complexities so you can focus on creating great applications.
In this lesson you will learn how to install the Angular CLI from npm, create a new application, serve the new application in the browser and edit it with live-reload.
ngClass is Angular 2's way of allowing you to apply classes and styles based on what's happening in your component. While CSS covers many scenarios with pseudo classes, you'll often run into scenarios where you need to apply classes based on certain conditions, so
ngClass comes to the rescue.
Components push out events using a combination of an
@Output and an
EventEmitter. This allows a clean separation between reusable Components and application logic. This lesson shows how to use
@Output to create an update event and then listen for the even in your application.
Each time you use the Async Pipe, you create a new subscription to the stream in the template. This can cause undesired behavior especially when network requests are involved. This lesson shows how to use a BehaviorSubject to observe the http stream so that only one request is made even though we still have two Async pipes in the template.
Angular 2 has many new moving parts, but the basics still focus on Components with templates, properties, events, and styles. This lesson walks through the template syntax and features inside of the Angular 2 components so that you can start building quickly.
Checking the validity of an Angular 2 input using ngModel is simply a matter of getting a reference to the ngModel itself. You get the reference by using the
#ref syntax, assigning it a name, then
ngModel will check all of the validity rules for you.
ngModel is a very powerful feature of Angular 2, but it isn’t enabled by default. You need to import the Angular 2
FormsModule and use the proper syntax around the
ngModel directive to enable the features (such as automatically updating from an ngModel) that you would expect.
Angular 2 forms provide RxJS streams for you to work with the data and validity as it flows out of the forms. These streams allow you handle complex scenarios and asynchronous scenarios with relative ease. This example shows you how to log out the values of the form when the form is valid.
ngModel exposes more than just validity, it even gives you the states of whether the
input has been “touched” or changed. This lesson explains and compares those states so you can use them to make complex validity requirements.
Using Radio Buttons in Angular 2 requires a basic understanding of forms as well as how their
labels will match up with each input. This lesson shows how to use
*ngFor with radio buttons and covers the quirks of the
id property and
for attributes as well as how to style validation of radio buttons.