Browse all Angular 2 lessons.

showing All 215 lessons...

Use Ionic 2 NavController to Manipulate App History

P

Create a Native Mobile Side Menu Layout in Ionic 2

P

Navigate Between Mobile Screens with the Ionic 2 NavController

P

Lazy Load Data with Ionic 2

P

Fetch data from an API using Angular 2 HTTP module

P

Use Sliding Gestures to Reorder an Ionic 2 List

P

Build your first page component with Ionic 2

P

Use the Ionic CLI to Generate Angular 2 Mobile Components

P

Start an Ionic 2 App with the CLI

P

Create iOS custom UIViewController components with NativeScript for Angular

P

Use an Android library in NativeScript for Angular using Java apis

P

Use Objective C Delegates in NativeScript for Angular iOS apps

P

Generate metadata TypeScript declarations for Objective C/Swift libraries on iOS

P

Develop a public NativeScript plugin using the nativescript-plugin-seed

P

Conditionally require a NativeScript plugin when only a single platform is supported

P

Build a custom NativeScript view component for iOS

P

Convert a Swift library to NativeScript for Angular iOS apps

P

Develop a consistent plugin api across your Android and iOS NativeScript app

P

Use an Objective C library in NativeScript for Angular iOS app

P

Build a custom NativeScript view component for Android

P

Translate common Java/Android APIs into NativeScript for Angular Android apps

P

Prepare for native iOS and Android api intellisense with NativeScript

P

Implement Structural Directive Data Binding with Context in Angular

P

Assign a Structual Directive a Dynamic Context in Angular

P

Create a Template Storage Service in Angular

P

Combine HostBinding with Services in Angular Directives

P

Write a Structural Directive in Angular

P

Use Template Elements in Angular

P

Create Elements from Template Elements with ngTemplateOutlet in Angular

P

Build a Directive that Tracks User Events in a Service in Angular

P

Handle Events with Angular Directives

P

Add Inputs to Angular Directives

P

Write an Angular Directive

Modify status bar colors on iOS and Android with NativeScript

Create a custom app theme using SASS for NativeScript

Use the nativescript-themes plugin to switch app themes on the fly

Integrate a custom NativeScript UI component plugin via npm and registerElement

Bind data to NativeScript Angular components using RxJS Observables

Display lists using NativeScript’s ListView component

Open an Angular component in a native iOS and Android popup modal

Handle back navigation when using page-router-outlet

Create a page title using ActionBar

Add styles to active routes using nsRouterLinkActive

Add native mobile page navigation using Angular Router

Edit with live reloading using NativeScript livesync

Style NativeScript views using the default core theme

Style NativeScript views using CSS

Create native mobile views using NativeScript XML

Preview NativeScript Apps in the GenyMotion Android emulator

Preview NativeScript apps in the iOS Simulator

angular tutorial about Use Ionic 2 NavController to Manipulate App History

Use Ionic 2 NavController to Manipulate App History

2:32 angular PRO

Ionic’s NavController offers an extensive API that allows you to manipulate your apps history, create history from nothing, and programmatically navigate back. NavController has an extensive API with many methods and lifecycle hooks that developers can use. Be sure to check out the documentation

angular tutorial about Create a Native Mobile Side Menu Layout in Ionic 2

Create a Native Mobile Side Menu Layout in Ionic 2

3:26 angular PRO

Ionic offers a few different layouts, including a side menu-based one. We’ll setup a simple side menu layout from scratch and see how it behaves on different devices. For instance, if you're users are on an Android device, the side menu (and really, the whole app) will look and behave like a native Android app. As the user swipes from the side, the menu will overlay the main content. For iOS, the menu will not move, but the app's main content will instead.

angular tutorial about Navigate Between Mobile Screens  with the Ionic 2 NavController

Navigate Between Mobile Screens with the Ionic 2 NavController

3:06 angular PRO

Ionic 2 has it’s own navigation system that that makes it straightforward to link components. We’ll look at how to take data from one template and pass it to another using Ionic NavController.

Instead of thinking in terms of URLs and hrefs, NavController allows devs to think in terms of a component stack. To navigate forward to a new view, a developer pushes a new component on to the navigation stack. To go back, the component is popped from the stack. This push/pop metaphor is borrowed from traditional native development and allows for a more flexible navigation paradigm.

angular tutorial about Lazy Load Data with Ionic 2

Lazy Load Data with Ionic 2

2:25 angular PRO

A common UI pattern in mobile apps is to be able to “pull” down on a list and fetch more data, or scroll and load more. This kind of pattern is built into Ionic with the ionRefresher component and ionInfiniteScroll component.

Infinite Scroll and Refresher can be heavily customized as well. Both components allow you to change what is shown as the user begins to perform their action. This allows for a much more customized experience!

angular tutorial about Fetch data from an API using Angular 2 HTTP module

Fetch data from an API using Angular 2 HTTP module

1:43 angular PRO

A typical app will interact with some sort of remote API at some point. We’ll creating a simple provider class to fetch data from the Random User API and populate our apps UI with this data.

The IonicModule in this lesson provides some default Angular modules for convenience. As of Ionic 2.x.x, those modules include Angular's BrowserModule, HttpModule, FormsModule, and ReactiveFormsModule

angular tutorial about Use Sliding Gestures to Reorder an Ionic 2 List

Use Sliding Gestures to Reorder an Ionic 2 List

3:11 angular PRO

Gesture driven lists are a great way to take a simple UI element and make it fun. We'll look at how we can make swipe-able list items to reveal additional functionality, as well as being able to drag and reorder list items.

angular tutorial about Build your first page component with Ionic 2

Build your first page component with Ionic 2

2:07 angular PRO

The simplest way to display data in an app is with a simple listview. This list will go over how items work and how to place certain elements in ion-items position slots.

angular tutorial about Use the Ionic CLI to Generate Angular 2 Mobile Components

Use the Ionic CLI to Generate Angular 2 Mobile Components

2:17 angular PRO

In this lesson we will walk through how to break out code into it's own provider using the CLI. Ionic’s CLI provides a generate command that will quickly help create common components, pipes, providers, and much more. To see what kind of generators are available, run ionic g --list in your terminal.

angular tutorial about Start an Ionic 2 App with the CLI

Start an Ionic 2 App with the CLI

2:18 angular PRO

We’ll go over requirements needed to create a project and how to install the ionic CLI for project creation. Once it’s installed, we’ll start a project, specify an app name, and reuse a starter template for our project.

angular tutorial about Create iOS custom UIViewController components with NativeScript for Angular

Create iOS custom UIViewController components with NativeScript for Angular

10:00 angular PRO

Learn how to construct sophisticated custom components using UIViewController. Understand how to construct UIButton's programmatically and attach tap events via NativeScript using the static ObjCExposedMethods property. Also learn how to save images to the user's iPhone Camera Roll using native api's. Specifically we will look at creating a custom {N} view component for SwiftyCam (a Snapchat inspired implementation: https://github.com/Awalz/SwiftyCam).

angular tutorial about Use an Android library in NativeScript for Angular using Java apis

Use an Android library in NativeScript for Angular using Java apis

7:26 angular PRO

We will learn how to add an Android library to our project and translate it’s Java api to NativeScript. For this lesson, we will look at Filestack’s Android SDK built with Gradle. Specifically, we will cover how to immediately start working with the library even when a NativeScript plugin does not exist for it.

angular tutorial about Use Objective C Delegates in NativeScript for Angular iOS apps

Use Objective C Delegates in NativeScript for Angular iOS apps

7:06 angular PRO

Objective C is a very interesting programming language which offers a lot of power as well as interesting paradigms. Let’s look at some Objective C api’s and how they translate to NativeScript. In particular, let’s learn how to wire up iOS delegates using Filestack's FSPickerDelegate as an example. We will also look at handling WeakRef’s and iterating an NSArray.

angular tutorial about Generate metadata TypeScript declarations for Objective C/Swift libraries on iOS

Generate metadata TypeScript declarations for Objective C/Swift libraries on iOS

1:22 angular PRO

Learn how to generate TypeScript declaration files for all native api’s for iOS, including any 3rd party Objective C/Swift libraries included in your project via Cocoapods or other means. This will allow you to view all the metadata for included iOS libraries to see what classes and apis are exposed to NativeScript.

angular tutorial about Develop a public NativeScript plugin using the nativescript-plugin-seed

Develop a public NativeScript plugin using the nativescript-plugin-seed

4:16 angular PRO

Learn how to use the nativescript-plugin-seed to kick start your NativeScript plugin development rapidly. Let’s examine best practices when developing a plugin api for public consumption, project organization, and how to publish it to npm. It will also show up within 1 day on the Offical Source for NativeScript Plugins.

angular tutorial about Conditionally require a NativeScript plugin when only a single platform is supported

Conditionally require a NativeScript plugin when only a single platform is supported

2:05 angular PRO

Sometimes a NativeScript plugin may only support 1 platform (iOS or Android). In these cases, we will want to conditionally require the plugin to ensure we don’t crash the other unsupported platform. Let’s consider view and service level implications for how best to handle these scenarios.

angular tutorial about Build a custom NativeScript view component for iOS

Build a custom NativeScript view component for iOS

8:26 angular PRO

Building a custom NativeScript XML view component for iOS entails several interesting notes, like overriding the onLoaded method of the base NativeScript View class. Let’s look at how to properly build a custom component based on an underlying native view widget with NativeScript XML which may come from a CocoaPod. We will learn several important aspects regarding Objective C properties and methods you will need to consider. In particular, we will implement this Objective C view component

angular tutorial about Convert a Swift library to NativeScript for Angular iOS apps

Convert a Swift library to NativeScript for Angular iOS apps

6:33 angular PRO

Swift is an exciting and intuitive programming language developed by Apple to be easier to learn than Objective C. It's syntax also more closely resembles JavaScript. Some native libraries you could work with may have been developed with Swift. Let’s look at a couple cases you could run into when trying to work with a Swift based iOS library. In particular, we will be implementing this Swift 3.0 CocoaPod. Also learn how to write files to your app’s document folder using NativeScript’s ‘file-system’ module.

angular tutorial about Develop a consistent plugin api across your Android and iOS NativeScript app

Develop a consistent plugin api across your Android and iOS NativeScript app

9:44 angular PRO

One of the exciting benefits you have with NativeScript is the ability to write native code (Java and Objective C) directly in JavaScript/TypeScript allowing you to create a consistent high level api over top of both underlying iOS Objective C/Swift and Android Java apis. In this lesson, we will look at how to design a consistent api that taps into the appropriate native api’s on the target platforms using underlying native libraries.

angular tutorial about Use an Objective C library in NativeScript for Angular iOS app

Use an Objective C library in NativeScript for Angular iOS app

9:57 angular PRO

We will learn how to install an Objective C library distributed via a CocoaPod into our project and expose its native api to our app. Specifically, we will cover how to immediately start working with the library even when a NativeScript plugin does not exist for it. Take for example Filestack, a really powerful file uploading api that provides an SDK written in JavaScript for the web, but also offers native SDK's for iOS and Android. Let's take a look at how to code right against this native iOS SDK.

angular tutorial about Build a custom NativeScript view component for Android

Build a custom NativeScript view component for Android

4:36 angular PRO

Building a custom NativeScript XML view component for Android is uniquely different than it’s iOS counterpart because of the Android Context which must be considered. Let’s look at how to properly build a custom view component based on an underlying native view widget. We will also look at what happens when our include.gradle file is not setup properly including handling problems with minimum sdk targets with plugins. Specifically, we will implement this Android widget representing the Google I/O 2016 clock. Learn how to create a custom AndroidManifest.xml inside your plugin to merge with your app's manifest to override certain characteristics. Read detailed documentation about the Android app manifest file.

angular tutorial about Translate common Java/Android APIs into NativeScript for Angular Android apps

Translate common Java/Android APIs into NativeScript for Angular Android apps

6:20 angular PRO

Java has been around a long time and when it comes to Android, you will encounter some structures that may throw you for a loop on how to code against with NativeScript. Let’s examine a few common Java/Android api constructs you may encounter and how to translate them to NativeScript. Learn how to get references to local files in your app using the ‘file-system’ module as well as how to take advantage of NativeScript’s Observable class to send notification events from one class to another. Lastly, look at considerations with Angular’s NgZone when handling your native libraries data events to update component view bindings.

angular tutorial about Prepare for native iOS and Android api intellisense with NativeScript

Prepare for native iOS and Android api intellisense with NativeScript

1:44 angular PRO

To prepare your development environment to code against native apis such as Objective C, Swift and Java, let's learn how to install tns-platform-declarations to provide rich intellisense support for all the native iOS and Android api’s. This lesson will cover how to modify your tsconfig.json and references.d.ts properly to ensure working with native api’s is smooth and as helpful as possible.

angular tutorial about Implement Structural Directive Data Binding with Context in Angular

Implement Structural Directive Data Binding with Context in Angular

2:03 angular PRO

Just like in *ngFor, you're able to pass in data into your own structural directives. This is done by declaring the variable using a let statement then passing context into the createEmbeddedView call.

angular tutorial about Assign a Structual Directive a Dynamic Context in Angular

Assign a Structual Directive a Dynamic Context in Angular

3:01 angular PRO

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.

angular tutorial about Create a Template Storage Service in Angular

Create a Template Storage Service in Angular

4:00 angular PRO

You need to define a <template> to be able to use it elsewhere in your app as a TemplateRef. You can store these TemplateRefs in a Service and then access them from any @Directive or @Component in your app.

angular tutorial about Combine HostBinding with Services in Angular Directives

Combine HostBinding with Services in Angular Directives

3:08 angular PRO

You can change behaviors of element and @Component properties based on services using @HostBinding in @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.

angular tutorial about Write a Structural Directive in Angular

Write a Structural Directive in Angular

3:01 angular PRO

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.

angular tutorial about Use Template Elements in Angular

Use Template Elements in Angular

1:33 angular PRO

The <template> element is a core piece of building complex UI in Angular. You can get a reference to these elements, then pass them around and create new elements based on them.

angular tutorial about Create Elements from Template Elements with ngTemplateOutlet in Angular

Create Elements from Template Elements with ngTemplateOutlet in Angular

2:38 angular PRO

ngTemplateOutlet is a directive that simplifies creating elements from template elements. This allows you to create simple, reusable templates then generate elements with custom data whenever you need them.

angular tutorial about Build a Directive that Tracks User Events in a Service in Angular

Build a Directive that Tracks User Events in a Service in Angular

3:11 angular PRO

A @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.

angular tutorial about Handle Events with Angular Directives

Handle Events with Angular Directives

1:35 angular PRO

A @Directive can also listen to events on their host element using @HostListener. This allows you to add behaviors that react to user input and update or modify properties on the element without having to create a custom component.

angular tutorial about Add Inputs to Angular Directives

Add Inputs to Angular Directives

2:55 angular PRO

The @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.

angular tutorial about Write an Angular Directive

Write an Angular Directive

1:42 angular

Angular Directives allow you manipulate elements by adding custom behaviors through attributes. This lesson covers how to create a Directive and attach its behavior to an element.

angular tutorial about Modify status bar colors on iOS and Android with NativeScript

Modify status bar colors on iOS and Android with NativeScript

2:22 angular

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.

angular tutorial about Create a custom app theme using SASS for NativeScript

Create a custom app theme using SASS for NativeScript

3:38 angular

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

angular tutorial about Use the nativescript-themes plugin to switch app themes on the fly

Use the nativescript-themes plugin to switch app themes on the fly

3:18 angular

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.

angular tutorial about Integrate a custom NativeScript UI component plugin via npm and registerElement

Integrate a custom NativeScript UI component plugin via npm and registerElement

2:58 angular

Plugins are the key to unlocking many rich features of the native platforms. Let’s learn how to integrate the nativescript-checkbox plugin to register a new custom UI component for use in our views.

angular tutorial about Bind data to NativeScript Angular components using RxJS Observables

Bind data to NativeScript Angular components using RxJS Observables

1:06 angular

Learn how to use standard RxJS Observables for your native view bindings using the power of Angular’s async pipe.

angular tutorial about Display lists using NativeScript’s ListView component

Display lists using NativeScript’s ListView component

2:14 angular

The NativeScript ListView component uses the native platform list controls under the hood for superior performance and native virtual scrolling (ListView widget on Android and UITableView on iOS).

angular tutorial about Open an Angular component in a native iOS and Android popup modal

Open an Angular component in a native iOS and Android popup modal

5:32 angular

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.

angular tutorial about Handle back navigation when using page-router-outlet

Handle back navigation when using page-router-outlet

1:37 angular

Learn how to handle special cases with back navigation when using the page-router-outlet.

angular tutorial about Create a page title using ActionBar

Create a page title using ActionBar

0:21 angular

Learn how to use the ActionBar component to provide a title for your mobile view.

angular tutorial about Add styles to active routes using nsRouterLinkActive

Add styles to active routes using nsRouterLinkActive

1:11 angular

Learn how to use the nsRouterLinkActive directive with options to control styling when a route is active.

angular tutorial about Add native mobile page navigation using Angular Router

Add native mobile page navigation using Angular Router

6:14 angular

Learn how to use the Angular Router to setup page navigation using NativeScript for Angular’s unique page-router-outlet directive in conjunction with the standard router-outlet to achieve a flexible routing setup.

angular tutorial about Edit with live reloading using NativeScript livesync

Edit with live reloading using NativeScript livesync

1:13 angular

Learn how to use the livesync option to make quick changes to css and/or Angular components to see live updates in the emulators or on devices. Also learn how to run livesync simultaneously on iOS and Android.

angular tutorial about Style NativeScript views using the default core theme

Style NativeScript views using the default core theme

2:35 angular

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, h1, h2, etc. Label classes and convenient p-10 or 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

angular tutorial about Style NativeScript views using CSS

Style NativeScript views using CSS

2:05 angular

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.

angular tutorial about Create native mobile views using NativeScript XML

Create native mobile views using NativeScript XML

3:24 angular

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.

angular tutorial about Preview NativeScript Apps in the GenyMotion Android emulator

Preview NativeScript Apps in the GenyMotion Android emulator

1:36 angular

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.

angular tutorial about Preview NativeScript apps in the iOS Simulator

Preview NativeScript apps in the iOS Simulator

1:10 angular

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?