From b690e0e1aa8edc85266f49f75dfd65f1e3780726 Mon Sep 17 00:00:00 2001
From: lisa-wolfgang <43426138+lisa-wolfgang@users.noreply.github.com>
Date: Sun, 23 May 2021 09:53:55 -0500
Subject: [PATCH 01/12] Fix broken links

---
 groceries-js/2.md | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/groceries-js/2.md b/groceries-js/2.md
index 9e27a86..30e3c38 100644
--- a/groceries-js/2.md
+++ b/groceries-js/2.md
@@ -24,7 +24,7 @@ Let’s get started by looking at how to add user interface components.
 
 The primary difference between building an app for the web and an app with NativeScript is in the UI elements that you use. NativeScript apps do not use a browser and do not have a DOM; therefore, elements like `<div>` and `<span>` simply do not work.
 
-Instead, NativeScript provides an [extensive suite of UI elements](http://docs.nativescript.org/ui/ui-views), each of which is implemented with native iOS and Android controls. For instance, the [`<Label>` control](http://docs.nativescript.org/ui/ui-views#label) our previous example used is actually rendered as a [`UILabel`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UILabel_Class/) on iOS and an [`android.widget.TextView`](http://developer.android.com/reference/android/widget/TextView.html) on Android. The great thing about using NativeScript is these native details are transparent to use as a developer. You type `<Label>` and let NativeScript handle the rendering details.
+Instead, NativeScript provides an [extensive suite of UI elements](https://docs.nativescript.org/ui-and-styling.html#components), each of which is implemented with native iOS and Android controls. For instance, the [`<Label>` control](https://docs.nativescript.org/ui-and-styling.html#label) our previous example used is actually rendered as a [`UILabel`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UILabel_Class/) on iOS and an [`android.widget.TextView`](http://developer.android.com/reference/android/widget/TextView.html) on Android. The great thing about using NativeScript is these native details are transparent to use as a developer. You type `<Label>` and let NativeScript handle the rendering details.
 
 Let’s put this into action by adding some new UI components to start building the Groceries UI.
 
@@ -55,18 +55,18 @@ Let’s put this into action by adding some new UI components to start building
 
 <hr data-action="end" />
 
-The code above adds two new NativeScript UI components: a [text field](https://docs.nativescript.org/angular/code-samples/ui/text-field) and a [button](https://docs.nativescript.org/angular/code-samples/ui/button). Much like HTML elements, NativeScript UI components provide attributes to let you configure their behavior and appearance. The code you just added uses the following attributes:
+The code above adds two new NativeScript UI components: a [text field](https://docs.nativescript.org/ui-and-styling.html#textfield) and a [button](https://docs.nativescript.org/ui-and-styling.html#button). Much like HTML elements, NativeScript UI components provide attributes to let you configure their behavior and appearance. The code you just added uses the following attributes:
 
 - `<TextField>`
     - `hint`: Shows placeholder text that tells the user what to type.
-    - `keyboardType`: The type of keyboard to present to the user for input. `keyboardType="email"` shows a keyboard optimized for entering email addresses. NativeScript currently supports [five types of keyboards](http://docs.nativescript.org/ui/keyboard.html) for text fields.
+    - `keyboardType`: The type of keyboard to present to the user for input. `keyboardType="email"` shows a keyboard optimized for entering email addresses. NativeScript currently supports five types of keyboards for text fields: `datetime`, `phone`, `number`, `url`, and `email`.
     - `autocorrect`: A boolean attribute that determines whether the mobile operating system should autocorrect user input. In the case of email address text fields, the autocorrect behavior is undesirable.
-    - `autocapitalizationType`: Determines how the operating system should autocapitalize user input. `autocapitalizationType="none"` turns autocapitalization off altogether. NativeScript supports [four autocapitalization types](http://docs.nativescript.org/api-reference/modules/_ui_enums_.autocapitalizationtype.html) on text fields.
+    - `autocapitalizationType`: Determines how the operating system should autocapitalize user input. `autocapitalizationType="none"` turns autocapitalization off altogether. NativeScript supports four autocapitalization types on text fields: `none`, `words`, `sentences`, and `allcharacters`.
     - `secure`: A boolean attribute that determines whether the text field’s text should be masked, which is commonly done on password fields.
 - `<Button>`
     - `text`: Controls the text displayed within the button.
 
-There are [many UI components](https://docs.nativescript.org/angular/ui/components) you can use to build NativeScript apps, and you might want to take some time to explore all that’s out there.
+There are [many UI components](https://docs.nativescript.org/ui-and-styling.html#components) you can use to build NativeScript apps, and you might want to take some time to explore all that’s out there.
 
 Next, let’s focus on the other new UI component in the above example—`<StackLayout>`—and discuss how to organize your UI components in NativeScript apps.
 
@@ -76,11 +76,11 @@ Next, let’s focus on the other new UI component in the above example—`<Stack
 
 Because NativeScript does not use a browser to render UI components, web layout concepts like `display: block` and `display: inline` do not work in NativeScript apps.
 
-Instead, NativeScript provides several different layout UI components that allow you to position your components using native Android and iOS layout mechanisms. Although there are [several layout containers in NativeScript](https://docs.nativescript.org/angular/ui/layout-containers), there are three you’ll primarily use.
+Instead, NativeScript provides several different layout UI components that allow you to position your components using native Android and iOS layout mechanisms. Although there are [several layout containers in NativeScript](https://docs.nativescript.org/ui-and-styling.html#layout-containers), there are three you’ll primarily use.
 
-* The [`<StackLayout>`](https://docs.nativescript.org/angular/code-samples/ui/layouts#stack-layout) lets you stack child UI elements either vertically or horizontally.
-* The [`<GridLayout>`](https://docs.nativescript.org/angular/code-samples/ui/layouts#grid-layout) lets you divide your interface into a series of rows and columns, much like a `<table>` in HTML markup.
-* The [`<FlexboxLayout>`](https://docs.nativescript.org/angular/code-samples/ui/layouts#flexbox-layout-one) lets you arrange UI components using the syntax as `display: flex` on web.
+* The [`<StackLayout>`](https://docs.nativescript.org/ui-and-styling.html#stacklayout) lets you stack child UI elements either vertically or horizontally.
+* The [`<GridLayout>`](https://docs.nativescript.org/ui-and-styling.html#gridlayout) lets you divide your interface into a series of rows and columns, much like a `<table>` in HTML markup.
+* The [`<FlexboxLayout>`](https://docs.nativescript.org/ui-and-styling.html#flexboxlayout) lets you arrange UI components using the syntax as `display: flex` on web.
 
 Let’s add one more layout example to your app and then discuss how all this works.
 
@@ -120,15 +120,15 @@ The other layout component in this example is the `<FlexboxLayout>` control. Wit
 
 Your next step will be centering the `<StackLayout>` using flexbox syntax, but to do that you’ll need to learn a new NativeScript concept—CSS.
 
-> **TIP:** Learning NativeScript layouts can be tricky, especially if you come from a web development background. Reading the [documentation](https://docs.nativescript.org/ui/layouts) is a good place to start.
+> **TIP:** Learning NativeScript layouts can be tricky, especially if you come from a web development background. Reading the [documentation](https://docs.nativescript.org/ui-and-styling.html#layout-containers) is a good place to start.
 
 ### Step 5. Styling your app using CSS
 
-NativeScript uses a [subset of CSS](http://docs.nativescript.org/styling) to change the visual appearance of your UI components.
+NativeScript uses a [subset of CSS](https://docs.nativescript.org/ui-and-styling.html#css) to change the visual appearance of your UI components.
 
 Why a subset? In NativeScript you’re building native iOS and Android apps, and some CSS properties either aren’t possible to replicate with native iOS and Android APIs, or would incur too great of a performance penalty. Don’t worry though; most common CSS properties are supported, and the CSS language syntax is the same—so styling native apps in NativeScript really does feel like styling web apps.
 
-> **TIP**: The NativeScript docs have [a full list of the supported CSS properties you can use](http://docs.nativescript.org/ui/styling#supported-css-properties).
+> **TIP**: The NativeScript docs have [a full list of the supported CSS properties you can use](https://docs.nativescript.org/ui-and-styling.html#supported-css-properties).
 
 Let’s look at how CSS in NativeScript works, and start to make this Groceries app look good in the process.
 
@@ -183,7 +183,7 @@ Flexbox syntax can be tricky to learn, regardless of whether you’re using flex
 
 NativeScript’s styling infrastructure makes it possible to create and use CSS themes for your native applications, much like you would use a framework like Bootstrap on the web.
 
-The NativeScript project provides a [core theme](https://docs.nativescript.org/ui/theme) that you can add to any of your projects. The theme includes two color schemes, light and dark, as well as a series of convenience class names to help you build elegant user interfaces quickly. Let’s look at how to add the Core theme to Groceries, and how to use it to make your login screen look good.
+The NativeScript project provides a [core theme](https://v7.docs.nativescript.org/ui/theme) that you can add to any of your projects. The theme includes two color schemes, light and dark, as well as a series of convenience class names to help you build elegant user interfaces quickly. Let’s look at how to add the Core theme to Groceries, and how to use it to make your login screen look good.
 
 <hr data-action="start" />
 
@@ -252,7 +252,7 @@ TextField {
 
 The first thing to note here are the class names `form`, `input`, `input-border`, `btn`, and `btn-primary`. These are all class names from the NativeScript Core Theme, and each apply a set of CSS rules to help your UI components look good by default.
 
-> **NOTE**: Refer to the [NativeScript Core theme documentation](https://docs.nativescript.org/ui/theme) for a full list of theme class names and how to use them in your apps.
+> **NOTE**: Refer to the [NativeScript Core theme documentation](https://v7.docs.nativescript.org/ui/theme) for a full list of theme class names and how to use them in your apps.
 
 One other thing to note before we move on—NativeScript’s CSS implementation allows you to select CSS rules by class names much like you do in web apps. In this example you use a `.btn-primary` selector to alter the app’s main button background color.
 
@@ -274,7 +274,7 @@ The second way is to point at an image that lives within your app's `app` folder
 <Image src="~/images/logo.png"/>
 ```
 
-The third way is to use platform-specific image resources, which you can [learn more about on the NativeScript documentation](https://docs.nativescript.org/ui/images#load-images-from-a-resource). Let’s add a logo image to the Groceries app so you can see how this works.
+The third way is to use platform-specific image resources, which you can [learn more about on the NativeScript documentation](https://v7.docs.nativescript.org/ui/images#load-images-from-a-resource). Let’s add a logo image to the Groceries app so you can see how this works.
 
 <hr data-action="start" />
 

From 6b6521806dcec0e9676a6e7ffbaf3b40170af948 Mon Sep 17 00:00:00 2001
From: lisa-wolfgang <43426138+lisa-wolfgang@users.noreply.github.com>
Date: Sun, 23 May 2021 10:08:13 -0500
Subject: [PATCH 02/12] Fix broken links

---
 groceries-js/3.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/groceries-js/3.md b/groceries-js/3.md
index b556b29..9107dec 100644
--- a/groceries-js/3.md
+++ b/groceries-js/3.md
@@ -125,7 +125,7 @@ exports.signIn = function() {
 
 #### Background: Component Inheritance
 
-All NativeScript UI components, including `<Page>`, inherit from the [`View` class](http://docs.nativescript.org/api-reference/classes/_ui_core_view_.view.html), which gives them a number of methods for working the UI. In this case you use the [`getViewById()` method](http://docs.nativescript.org/api-reference/classes/_ui_core_view_.view.html#getviewbyid) to get a reference to the email text field by its `id` attribute.
+All NativeScript UI components, including `<Page>`, inherit from the [`View` class](https://v6.docs.nativescript.org/api-reference/classes/_ui_core_view_.view.html), which gives them a number of methods for working the UI. In this case you use the [`getViewById()` method](https://v6.docs.nativescript.org/api-reference/classes/_ui_core_view_.view.html#getviewbyid) to get a reference to the email text field by its `id` attribute.
 
 #### End Background
 
@@ -226,7 +226,7 @@ Next, look in the `app/views/shared/view-models` folder, which contains a few vi
 
 #### Background: The Fetch module
 
-Note that the `register()` function uses the config module to get the path to the backend, as well as the [fetch module](https://docs.nativescript.org/ns-framework-modules/fetch) to make HTTP calls.
+Note that the `register()` function uses the config module to get the path to the backend, as well as the [fetch module](https://v7.docs.nativescript.org/ns-framework-modules/fetch) to make HTTP calls.
 
 ``` JavaScript
 var config = require("../../shared/config");

From 73808511b5c92d1041ca22e71ba1200821dd6520 Mon Sep 17 00:00:00 2001
From: lisa-wolfgang <43426138+lisa-wolfgang@users.noreply.github.com>
Date: Sun, 23 May 2021 10:57:50 -0500
Subject: [PATCH 03/12] Fix broken links

---
 groceries-js/4.md | 38 +++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/groceries-js/4.md b/groceries-js/4.md
index 7713dcd..6a2ebbd 100644
--- a/groceries-js/4.md
+++ b/groceries-js/4.md
@@ -10,7 +10,7 @@ Each UI component has a set of properties and methods you can use to customize y
 
 #### Background: NativeScript modules
 
-All NativeScript UI components are implemented as NativeScript modules, which are a series of TypeScript modules you use to add powerful functionality to your apps. There are a [lot of these modules](https://docs.nativescript.org/angular/core-concepts/modules), and you will use several of them as you complete this tutorial.
+All NativeScript UI components are implemented as NativeScript modules, which are a series of TypeScript modules you use to add powerful functionality to your apps. There are a [lot of these modules](https://v7.docs.nativescript.org/angular/core-concepts/modules), and you will use several of them as you complete this tutorial.
 
 The source code for the NativeScript modules lives on GitHub in the [NativeScript/NativeScript repo](https://github.com/nativescript/nativescript). The modules are [distributed through npm as a “tns-core-modules” package](https://www.npmjs.com/package/tns-core-modules), which all NativeScript apps depend on. Because the NativeScript modules are open source, you are welcome to [contribute changes](https://www.nativescript.org/contribute).
 
@@ -37,7 +37,7 @@ page.actionBarHidden = true;
 
 #### Background: About the Page class
 
-This code uses an instance of the [`Page` class](https://docs.nativescript.org/api-reference/classes/_ui_page_.page.html) from the [NativeScript page module](https://docs.nativescript.org/api-reference/modules/_ui_page_.html), and sets its `actionBarHidden` property to `true`, which hides the ActionBar that shows by default on Android devices.
+This code uses an instance of the [`Page` class](https://v6.docs.nativescript.org/api-reference/classes/_ui_page_.page.html) from the [NativeScript page module](https://v6.docs.nativescript.org/api-reference/modules/_ui_page_.html), and sets its `actionBarHidden` property to `true`, which hides the ActionBar that shows by default on Android devices.
 
 #### End Background
 
@@ -156,17 +156,17 @@ Now, you have a much better user experience, with the screen color clearly indic
 
 ### Step 15. Introducing NativeScript UI
 
-In addition to the NativeScript [core user interface components](https://docs.nativescript.org/ui/components), many of which you’ve used throughout this guide, NativeScript additionally provides a collection of free, professional components collectively known as [NativeScript UI](https://www.nativescript.org/ui-for-nativescript).
+In addition to the NativeScript [core user interface components](https://docs.nativescript.org/ui-and-styling.html#components), many of which you’ve used throughout this guide, NativeScript additionally provides a collection of free, professional components collectively known as [NativeScript UI](https://v7.docs.nativescript.org/angular/ui/overview#nativescript-ui-overview).
 
 NativeScript UI contains controls for building drawers, listviews, calendars, charts, forms, autocompletes, and more. In fact, the graph you saw back in lesson one of this tutorial was a NativeScript UI component. To show what NativeScript UI can do, let’s use the suite’s listview control to start to add a grocery list to your app.
 
 #### Background: NativeScript plugins
 
-NativeScript UI is a NativeScript plugin. [NativeScript plugins](https://docs.nativescript.org/plugins/plugins) are npm packages with some added native functionality, such as the ability to leverage Android and iOS SDKs.
+NativeScript UI is a NativeScript plugin. [NativeScript plugins](https://v7.docs.nativescript.org/core-concepts/plugins) are npm packages with some added native functionality, such as the ability to leverage Android and iOS SDKs.
 
 Because NativeScript plugins require full iOS and Android builds to use, normally you cannot use NativeScript plugins in the NativeScript Playground environment.
 
-However, a few NativeScript plugins have built-in support in NativeScript Playground, including NativeScript UI, [the accelerometer plugin](https://market.nativescript.org/plugins/nativescript-accelerometer), and the [geolocation plugin](https://market.nativescript.org/plugins/nativescript-geolocation). You can [learn more about using plugins on the NativeScript documentation](https://docs.nativescript.org/plugins/plugins), and you can [peruse available plugins on the NativeScript Marketplace](https://market.nativescript.org/plugins/nativescript-geolocation).
+However, a few NativeScript plugins have built-in support in NativeScript Playground, including NativeScript UI, [the accelerometer plugin](https://market.nativescript.org/plugins/nativescript-accelerometer), and the [geolocation plugin](https://market.nativescript.org/plugins/nativescript-geolocation). You can [learn more about using plugins on the NativeScript documentation](https://v7.docs.nativescript.org/core-concepts/plugins), and you can [peruse available plugins on the NativeScript Marketplace](https://market.nativescript.org/).
 
 #### End background
 
@@ -252,7 +252,7 @@ The NativeScript Core Theme contains a number of class names that let you contro
 
 The class names follow a convention of margin/padding - top/bottom/left/right - amount. So for example, `<Label class="m-t-2">` renders a label with a `margin-top` of `2`, and `<Label class="p-b-5">` renders a label with a `padding-bottom` of `5`.
 
-Therefore, in the example above `<Label class="p-15">` applies `padding: 15` to the label. You can [learn more about these class names on the NativeScript docs](https://docs.nativescript.org/ui/theme#padding-and-margin).
+Therefore, in the example above `<Label class="p-15">` applies `padding: 15` to the label. You can [learn more about these class names on the NativeScript docs](https://v7.docs.nativescript.org/ui/theme#padding-and-margin).
 
 #### End Background
 
@@ -520,7 +520,7 @@ In this step you’ll leverage one feature of the `<RadListView>` control, which
 Because NativeScript UI has a lot of controls with a lot of features, it can be difficult to know where to start. Here are some recommendations.
 
 * If you’re a video learner, start by watching [a tour of NativeScript UI on YouTube](https://www.youtube.com/watch?v=4JJVOxybR4E).
-* If you like skimming documentation, the [NativeScript UI documentation](https://www.nativescript.org/ui-for-nativescript) has a thorough list of the controls and the features they offer.
+* If you like skimming documentation, the [NativeScript UI documentation](https://v7.docs.nativescript.org/angular/ui/overview#nativescript-ui-overview) has a thorough list of the controls and the features they offer.
 
 Let's build out the delete functionality. We're going to enhance our current implementation of the RadListView to enable a swipe event, so that when you swipe left, a red box with an 'x' appears. Tap the 'x' and delete the item.
 
@@ -605,7 +605,7 @@ viewModel.delete = function(index) {
 
 <hr data-action="end" />
 
-The NativeScript UI components have a ton of features that you can use to add powerful functionality to your applications. In the previous example you used the [`RadListView`’s swipe action capability](http://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/ListView/swipe-actions), which allows users to swipe on list items to perform actions.
+The NativeScript UI components have a ton of features that you can use to add powerful functionality to your applications. In the previous example you used the [`RadListView`’s swipe action capability](https://v7.docs.nativescript.org/ui/components/radlistview/swipe-actions), which allows users to swipe on list items to perform actions.
 
 #### Background: Details on using swipe actions
 
@@ -619,7 +619,7 @@ To understand how this works, let’s start back with the opening `<RadListView>
         >
 ```
 
-Setting the `swipeActions` attribute to `true` is necessary to turn on the `<RadListView>`’s swipe behavior. From there, the control triggers [a number of events](http://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/ListView/swipe-actions) you can subscribe to configure exactly what you want to happen during swipes.
+Setting the `swipeActions` attribute to `true` is necessary to turn on the `<RadListView>`’s swipe behavior. From there, the control triggers [a number of events](https://v7.docs.nativescript.org/ui/components/radlistview/swipe-actions#swipe-actions) you can subscribe to configure exactly what you want to happen during swipes.
 
 The only event you must subscribe to is the `itemSwipeProgressStarted` event, as you have to set a few values that control exactly how the swipe will work. With that in mind let’s look at your `onSwipeCellStarted` method and what it does.
 
@@ -638,7 +638,7 @@ The key here are the three lines of code at the bottom that set `right`, `left`,
 
 In this example you’re saying the user should be able to swipe right for a distance that’s equal to the width of the delete button, that the user shouldn’t be able to swipe left, and that the user should be able to swipe half the width of the delete button before the button stays open.
 
-> **NOTE**: Another popular way to configure swipe functionality is to perform an action automatically on swipe, without requiring the user to explicitly tap a button. The `<RadListView>` control supports this approach, and you read more about it on the [NativeScript UI documentation on the topic](http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/ListView/swipe-actions#swipe-actions).
+> **NOTE**: Another popular way to configure swipe functionality is to perform an action automatically on swipe, without requiring the user to explicitly tap a button. The `<RadListView>` control supports this approach, and you can read more about it on the [NativeScript UI documentation on the topic](https://v7.docs.nativescript.org/ui/components/radlistview/swipe-actions#swipe-actions).
 
 #### End Background
 
@@ -648,7 +648,7 @@ Now that users can both add and delete groceries from a list, let’s finish up
 
 Currently there's a bit of a delay when you first visit the list page before groceries appear. This delay could confuse a new user, who might think the app is stuck rather than retrieving data from a backend.
 
-In NativeScript apps you can use the [ActivityIndicator](https://docs.nativescript.org/api-reference/classes/_ui_activity_indicator_.activityindicator.html) module to show a spinner icon in your UI while your app is busy performing actions. The `<ActivityIndicator>` is a relatively simple UI element as it primarily uses one attribute—`busy`. When an `<ActivityIndicator>`’s `busy` attribute is set to `true` the `<ActivityIndicator>` shows, and when its `busy` attribute is set to `false` it doesn't. Let's see how the module works by adding an `<ActivityIndicator>` to the list page.
+In NativeScript apps you can use the [ActivityIndicator](https://v6.docs.nativescript.org/api-reference/classes/_ui_activity_indicator_.activityindicator.html) module to show a spinner icon in your UI while your app is busy performing actions. The `<ActivityIndicator>` is a relatively simple UI element as it primarily uses one attribute—`busy`. When an `<ActivityIndicator>`’s `busy` attribute is set to `true` the `<ActivityIndicator>` shows, and when its `busy` attribute is set to `false` it doesn't. Let's see how the module works by adding an `<ActivityIndicator>` to the list page.
 
 <hr data-action="start" />
 
@@ -699,13 +699,13 @@ To finish off this tutorial you’re going to add one last feature to polish the
 
 ### Step 20. Creating engaging animations
 
-The ability to run robust and performant animations is one of the biggest reasons people choose to build native mobile apps, and NativeScript makes creating these animations simple. The NativeScript animation module provides a [series of JavaScript APIs](https://docs.nativescript.org/ui/animation) that let you perform a wide variety of animations to elements on the screen, including the following:
+The ability to run robust and performant animations is one of the biggest reasons people choose to build native mobile apps, and NativeScript makes creating these animations simple. The NativeScript animation module provides a [series of JavaScript APIs](https://docs.nativescript.org/interaction.html#animations) that let you perform a wide variety of animations to elements on the screen, including the following:
 
-- [Opacity](https://docs.nativescript.org/ui/animation-examples#opacity)
-- [Background Color](https://docs.nativescript.org/ui/animation-examples#background-color)
-- [Translations](https://docs.nativescript.org/ui/animation-examples#translate)
-- [Scaling](https://docs.nativescript.org/ui/animation-examples#scale)
-- [Rotating](https://docs.nativescript.org/ui/animation-examples#rotate)
+- [Opacity](https://docs.nativescript.org/interaction.html#animated-opacity)
+- [Background Color](https://docs.nativescript.org/interaction.html#animate-background-color)
+- [Translations](https://docs.nativescript.org/interaction.html#animate-position)
+- [Scaling](https://docs.nativescript.org/interaction.html#animate-scale)
+- [Rotating](https://docs.nativescript.org/interaction.html#animate-rotate)
 
 Let’s add a simple animation that fades in the list page’s `<RadListView>` so you can see how this works.
 
@@ -732,7 +732,7 @@ ListView {
 
 This code sets the starting opacity value of the `<ListView>` to `0` so that the control is hidden when the page loads. The code also defines a `visible` class name that changes the `opacity` of an element from `0` to `1` over one full second.
 
-> **TIP**: For background on how the CSS animations syntax works, feel free to refer to the [NativeScript CSS animation documentation](https://docs.nativescript.org/ui/animation-css), or [external CSS animation guides](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations).
+> **TIP**: For background on how the CSS animations syntax works, feel free to refer to the [NativeScript CSS animation documentation](https://docs.nativescript.org/interaction.html#css-animations), or [external CSS animation guides](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations).
 
 * **b.** Now that you have the CSS in place, your next step is to add the previously defined `"visible"` class name to the `<ListView>` control after data has loaded. To do that, start by opening `app/views/list/list-page.js` and adding the following new property right below the existing `isLoading: false,` line.
 
@@ -777,7 +777,7 @@ The key here is the list view’s `class="{{ listLoaded ? 'visible' : '' }}"` bi
 
 The advantage of using CSS animations is that you avoid the need to reference specific UI elements in your JavaScript code; there was no need to create a local template variable. The CSS animation approach also helps to keep your code decoupled. Your JavaScript code can focus on logic, and leave styling concerns to your CSS code.
 
-> **TIP**: There’s a lot more you can do with NativeScript animations—look over the [NativeScript animation documentation](https://docs.nativescript.org/ui/animation) to get an idea of what you can do.
+> **TIP**: There’s a lot more you can do with NativeScript animations—look over the [NativeScript animation documentation](https://docs.nativescript.org/interaction.html#animations) to get an idea of what you can do.
 
 CSS animations are an easy way to add powerful animation to your code using syntax you might be familiar with from the web.
 

From a717f643b02c9e38943d0b7c2b80a178cbc5e080 Mon Sep 17 00:00:00 2001
From: lisa-wolfgang <43426138+lisa-wolfgang@users.noreply.github.com>
Date: Sun, 23 May 2021 11:17:15 -0500
Subject: [PATCH 04/12] Fix broken links

---
 groceries-ng/1.md | 34 +++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/groceries-ng/1.md b/groceries-ng/1.md
index c0710db..af71e12 100644
--- a/groceries-ng/1.md
+++ b/groceries-ng/1.md
@@ -33,7 +33,7 @@ Let’s get started by looking at how to add user interface components.
 
 The primary difference between building an app for the web and an app with NativeScript is in the UI elements that you use. NativeScript apps do not use a browser and do not have a DOM; therefore, elements like `<div>` and `<span>` simply do not work.
 
-Instead, NativeScript provides an [extensive suite of UI elements](http://docs.nativescript.org/ui/ui-views), each of which is implemented with native iOS and Android controls. For instance, the [`<Label>` control](http://docs.nativescript.org/ui/ui-views#label) our previous example used is actually rendered as a [`UILabel`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UILabel_Class/) on iOS and an [`android.widget.TextView`](http://developer.android.com/reference/android/widget/TextView.html) on Android. The great thing about using NativeScript is these native details are transparent to use as a developer. You type `<Label>` and let NativeScript handle the rendering details.
+Instead, NativeScript provides an [extensive suite of UI elements](https://docs.nativescript.org/ui-and-styling.html#components), each of which is implemented with native iOS and Android controls. For instance, the [`<Label>` control](https://docs.nativescript.org/ui-and-styling.html#label) our previous example used is actually rendered as a [`UILabel`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UILabel_Class/) on iOS and an [`android.widget.TextView`](http://developer.android.com/reference/android/widget/TextView.html) on Android. The great thing about using NativeScript is these native details are transparent to use as a developer. You type `<Label>` and let NativeScript handle the rendering details.
 
 Let’s put this into action by adding some new UI components to start building the Groceries UI.
 
@@ -106,34 +106,34 @@ The decorator’s `selector` property defines how a component can be used within
 
 #### End Background
 
-The code above adds two new NativeScript UI components: a [text field](https://docs.nativescript.org/angular/code-samples/ui/text-field) and a [button](https://docs.nativescript.org/angular/code-samples/ui/button). Much like HTML elements, NativeScript UI components provide attributes to let you configure their behavior and appearance. The code you just added uses the following attributes:
+The code above adds two new NativeScript UI components: a [text field](https://docs.nativescript.org/ui-and-styling.html#textfield) and a [button](https://docs.nativescript.org/ui-and-styling.html#button). Much like HTML elements, NativeScript UI components provide attributes to let you configure their behavior and appearance. The code you just added uses the following attributes:
 
 - `<TextField>`
     - `hint`: Shows placeholder text that tells the user what to type.
-    - `keyboardType`: The type of keyboard to present to the user for input. `keyboardType="email"` shows a keyboard optimized for entering email addresses. NativeScript currently supports [five types of keyboards](http://docs.nativescript.org/ui/keyboard.html) for text fields.
+    - `keyboardType`: The type of keyboard to present to the user for input. `keyboardType="email"` shows a keyboard optimized for entering email addresses. NativeScript currently supports five types of keyboards for text fields: `datetime`, `phone`, `number`, `url`, and `email`.
     - `autocorrect`: A boolean attribute that determines whether the mobile operating system should autocorrect user input. In the case of email address text fields, the autocorrect behavior is undesirable.
-    - `autocapitalizationType`: Determines how the operating system should autocapitalize user input. `autocapitalizationType="none"` turns autocapitalization off altogether. NativeScript supports [four autocapitalization types](http://docs.nativescript.org/api-reference/modules/_ui_enums_.autocapitalizationtype.html) on text fields.
+    - `autocapitalizationType`: Determines how the operating system should autocapitalize user input. `autocapitalizationType="none"` turns autocapitalization off altogether. NativeScript supports four autocapitalization types on text fields: `none`, `words`, `sentences`, and `allcharacters`.
     - `secure`: A boolean attribute that determines whether the text field’s text should be masked, which is commonly done on password fields.
 - `<Button>`
     - `text`: Controls the text displayed within the button.
 
-There are [many UI components](https://docs.nativescript.org/angular/ui/components) you can use to build NativeScript apps, and you might want to take some time to explore all that’s out there.
+There are [many UI components](https://docs.nativescript.org/ui-and-styling.html#components) you can use to build NativeScript apps, and you might want to take some time to explore all that’s out there.
 
 Next, let’s focus on the other new UI component in the above example—`<StackLayout>`—and discuss how to organize your UI components in NativeScript apps.
 
 > **TIP**:
-> * The [code samples](https://docs.nativescript.org/angular/code-samples/overview.html) portion of the NativeScript documentation is a great place to find copy-and-paste friendly examples of the various NativeScript UI components. The [TextField](https://docs.nativescript.org/angular/code-samples/ui/text-field.html) and [Button](https://docs.nativescript.org/angular/code-samples/ui/button.html) code sample pages are great places to get started.
+> * The [NativeScript documentation](https://docs.nativescript.org/ui-and-styling) is a great place to find copy-and-paste friendly examples of the various NativeScript UI components. The [TextField](https://docs.nativescript.org/ui-and-styling.html#textfield) and [Button](https://docs.nativescript.org/ui-and-styling.html#button) pages are great places to get started.
 > * If you’re coming from a web or hybrid development background, you may find Nic Raboy’s guide for [Upgrading Hybrid Apps to Native with NativeScript](http://www.hybridtonative.com/) helpful, as it compares and contrasts web and native user interface implementations.
 
 ### Step 2. Organizing your UI components with layouts
 
 Because NativeScript does not use a browser to render UI components, web layout concepts like `display: block` and `display: inline` do not work in NativeScript apps.
 
-Instead, NativeScript provides several different layout UI components that allow you to position your components using native Android and iOS layout mechanisms. Although there are [several layout containers in NativeScript](https://docs.nativescript.org/angular/ui/layout-containers), there are three you’ll primarily use.
+Instead, NativeScript provides several different layout UI components that allow you to position your components using native Android and iOS layout mechanisms. Although there are [several layout containers in NativeScript](https://docs.nativescript.org/ui-and-styling.html#layout-containers), there are three you’ll primarily use.
 
-* The [`<StackLayout>`](https://docs.nativescript.org/angular/code-samples/ui/layouts#stack-layout) lets you stack child UI elements either vertically or horizontally.
-* The [`<GridLayout>`](https://docs.nativescript.org/angular/code-samples/ui/layouts#grid-layout) lets you divide your interface into a series of rows and columns, much like a `<table>` in HTML markup.
-* The [`<FlexboxLayout>`](https://docs.nativescript.org/angular/code-samples/ui/layouts#flexbox-layout-one) lets you arrange UI components using the syntax as `display: flex` on web.
+* The [`<StackLayout>`](https://docs.nativescript.org/ui-and-styling.html#stacklayout) lets you stack child UI elements either vertically or horizontally.
+* The [`<GridLayout>`](https://docs.nativescript.org/ui-and-styling.html#gridlayout) lets you divide your interface into a series of rows and columns, much like a `<table>` in HTML markup.
+* The [`<FlexboxLayout>`](https://docs.nativescript.org/ui-and-styling.html#flexboxlayout) lets you arrange UI components using the syntax as `display: flex` on web.
 
 Let’s add one more layout example to your app and then discuss how all this works.
 
@@ -173,15 +173,15 @@ The other layout component in this example is the `<FlexboxLayout>` control. Wit
 
 Your next step will be centering the `<StackLayout>` using flexbox syntax, but to do that you’ll need to learn a new NativeScript concept—CSS.
 
-> **TIP**: Learning NativeScript layouts can be tricky, especially if you come from a web development background. The [NativeScript layouts code samples](https://docs.nativescript.org/angular/code-samples/ui/layouts) have copy-and-paste-friendly code snippets you can use to experiment with layouts directly within NativeScript Playground.
+> **TIP**: Learning NativeScript layouts can be tricky, especially if you come from a web development background. The [NativeScript layout documentation](https://docs.nativescript.org/ui-and-styling.html#layout-containers) has copy-and-paste-friendly code snippets you can use to experiment with layouts directly within NativeScript Playground.
 
 ### Step 3. Styling your app using CSS
 
-NativeScript uses a [subset of CSS](http://docs.nativescript.org/styling) to change the visual appearance of your UI components.
+NativeScript uses a [subset of CSS](https://docs.nativescript.org/ui-and-styling.html#css) to change the visual appearance of your UI components.
 
 Why a subset? In NativeScript you’re building native iOS and Android apps, and some CSS properties either aren’t possible to replicate with native iOS and Android APIs, or would incur too great of a performance penalty. Don’t worry though; most common CSS properties are supported, and the CSS language syntax is the same—so styling native apps in NativeScript really does feel like styling web apps.
 
-> **TIP**: The NativeScript docs have [a full list of the supported CSS properties you can use](http://docs.nativescript.org/ui/styling#supported-css-properties).
+> **TIP**: The NativeScript docs have [a full list of the supported CSS properties you can use](https://docs.nativescript.org/ui-and-styling.html#supported-css-properties).
 
 Let’s look at how CSS in NativeScript works, and start to make this Groceries app look good in the process.
 
@@ -255,7 +255,7 @@ Flexbox syntax can be tricky to learn, regardless of whether you’re using flex
 
 NativeScript’s styling infrastructure makes it possible to create and use CSS themes for your native applications, much like you would use a framework like Bootstrap on the web.
 
-The NativeScript project provides a [core theme](https://docs.nativescript.org/ui/theme) that you can add to any of your projects. The theme includes two color schemes, light and dark, as well as a series of convenience class names to help you build elegant user interfaces quickly. Let’s look at how to add the Core theme to Groceries, and how to use it to make your login screen look good.
+The NativeScript project provides a [core theme](https://v7.docs.nativescript.org/angular/ui/theme) that you can add to any of your projects. The theme includes two color schemes, light and dark, as well as a series of convenience class names to help you build elegant user interfaces quickly. Let’s look at how to add the Core theme to Groceries, and how to use it to make your login screen look good.
 
 <hr data-action="start" />
 
@@ -274,7 +274,7 @@ ActionBar {
 
 > **TIP**:
 > * In NativeScript, the `app.css` is a global stylesheet. Any rules you apply in `app.css` apply to all components in your app.
-> * The `<ActionBar>` colors look a little odd on this page at the moment; don’t worry though, you’ll fix this display later in this tutorial. You can [learn more about using the `<ActionBar>` component on its documentation page](https://docs.nativescript.org/angular/ui/action-bar).
+> * The `<ActionBar>` colors look a little odd on this page at the moment; don’t worry though, you’ll fix this display later in this tutorial. You can [learn more about using the `<ActionBar>` component on its documentation page](https://docs.nativescript.org/ui-and-styling.html#actionbar).
 
 * **b.** Open your `app/login/login.component.html` file and replace its contents with the following code, which adds a new `class` attribute to several of the UI components.
 
@@ -325,7 +325,7 @@ TextField {
 
 The first thing to note here are the class names `form`, `input`, `input-border`, `btn`, and `btn-primary`. These are all class names from the NativeScript Core Theme, and each apply a set of CSS rules to help your UI components look good by default.
 
-> **NOTE**: Refer to the [NativeScript Core theme documentation](https://docs.nativescript.org/ui/theme) for a full list of theme class names and how to use them in your apps.
+> **NOTE**: Refer to the [NativeScript Core theme documentation](https://v7.docs.nativescript.org/angular/ui/theme) for a full list of theme class names and how to use them in your apps.
 
 One other thing to note before we move on—NativeScript’s CSS implementation allows you to select CSS rules by class names much like you do in web apps. In this example you use a `.btn-primary` selector to alter the app’s main button background color.
 
@@ -347,7 +347,7 @@ The second way is to point at an image that lives within your app's `app` folder
 <Image src="~/images/logo.png"></Image>
 ```
 
-The third way is to use platform-specific image resources, which you can [learn more about on the NativeScript documentation](https://docs.nativescript.org/ui/images#load-images-from-a-resource). Let’s add a logo images to the Groceries app so you can see how this works.
+The third way is to use platform-specific image resources, which you can [learn more about on the NativeScript documentation](https://v7.docs.nativescript.org/ui/images#load-images-from-a-resource). Let’s add a logo images to the Groceries app so you can see how this works.
 
 <hr data-action="start" />
 

From 99631cdf9f72b740513c1fadb473b35ae7e30c13 Mon Sep 17 00:00:00 2001
From: lisa-wolfgang <43426138+lisa-wolfgang@users.noreply.github.com>
Date: Sun, 23 May 2021 11:22:38 -0500
Subject: [PATCH 05/12] Fix broken links

---
 groceries-ng/2.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/groceries-ng/2.md b/groceries-ng/2.md
index bd41e2c..ad105e2 100644
--- a/groceries-ng/2.md
+++ b/groceries-ng/2.md
@@ -35,7 +35,7 @@ export class AppComponent {
 The `(eventName)="functionName()"` syntax is part of [Angular’s event binding system](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding), which lets you bind an event that occurs on a UI element to a function in your component’s class. In this case, the `(tap)="submit()"` syntax tells Angular to run the `AppComponent` class’s `submit()` function whenever the user taps the sign in button.
 
 > **TIP**:
-> * You can find a list of events available for each UI element on its API documentation page. For instance, the [button element’s API documentation](http://docs.nativescript.org/api-reference/classes/_ui_button_.button.html) lists its `tap` event.
+> * You can find a list of events available for each UI element on its API documentation page. For instance, the [button element’s API documentation](https://v6.docs.nativescript.org/api-reference/classes/_ui_core_view_.view.html) lists its `tap` event.
 > * The Angular docs have a helpful [cheat sheet](https://angular.io/docs/ts/latest/guide/cheatsheet.html) that includes the various syntaxes available when building templates. Don’t worry too much about knowing how all these work at the moment; you’ll use the most common syntaxes as you complete this guide.
 
 With the `tap` event in place, you now have a way of tying the UI elements in your template to your TypeScript code. To make a login page actually work though, we need to introduce one other way of connecting a template to code: data binding.
@@ -190,7 +190,7 @@ There are many reasons to segment any application into modular units, and you ca
 
 Even if you have no plans to create an Angular web app, separating out your code is still advantageous for a number of other reasons—testability, ease of maintenance, and so forth—but if you _do_ have plans to build an Angular web app, having a chunk of functionality that you can reuse in your native and web apps can be an invaluable time saver.
 
-> **TIP**: NativeScript provides a way to build Angular web and native apps from a single code base using the Angular CLI. You can [learn more about this approach on the NativeScript documentation](https://docs.nativescript.org/angular/code-sharing/intro).
+> **TIP**: NativeScript provides a way to build Angular web and native apps from a single code base using the Angular CLI. You can [learn more about this approach on the NativeScript documentation](https://v7.docs.nativescript.org/angular/code-sharing/intro).
 
 To see how this works in action, let’s edit some files in your `shared` folder and set them up to be imported.
 
@@ -786,7 +786,7 @@ login() {
 
 > **NOTE**:
 > * You don’t have to add `Router` to your `LoginComponent`’s `providers` array because it’s already included in the `NativeScriptRouterModule` you’re including as an `import` in `app.module.ts`.
-> * Refer to the [NativeScript navigation documentation](https://docs.nativescript.org/angular/core-concepts/angular-navigation.html) for more information on what you can do with the router in NativeScript, such as configuring alternate page transitions.
+> * Refer to the [NativeScript navigation documentation](https://v7.docs.nativescript.org/angular/core-concepts/angular-navigation.html) for more information on what you can do with the router in NativeScript, such as configuring alternate page transitions.
 
 #### End Background
 

From d5102d6009136256d5fa8bc6ade24a1825137b65 Mon Sep 17 00:00:00 2001
From: lisa-wolfgang <43426138+lisa-wolfgang@users.noreply.github.com>
Date: Sun, 23 May 2021 11:41:58 -0500
Subject: [PATCH 06/12] Fix broken links

---
 groceries-ng/3.md | 46 +++++++++++++++++++++++-----------------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/groceries-ng/3.md b/groceries-ng/3.md
index f116d8e..579873b 100644
--- a/groceries-ng/3.md
+++ b/groceries-ng/3.md
@@ -12,7 +12,7 @@ So far, you’ve only used NativeScript UI elements by including them in an Angu
 
 #### Background: NativeScript modules
 
-All NativeScript UI components are implemented as NativeScript modules, which are a series of TypeScript modules you use to add powerful functionality to your apps. There are a [lot of these modules](https://docs.nativescript.org/angular/core-concepts/modules), and you will use several of them as you complete this tutorial.
+All NativeScript UI components are implemented as NativeScript modules, which are a series of TypeScript modules you use to add powerful functionality to your apps. There are a [lot of these modules](https://v7.docs.nativescript.org/angular/core-concepts/modules), and you will use several of them as you complete this tutorial.
 
 The source code for the NativeScript modules lives on GitHub in the [NativeScript/NativeScript repo](https://github.com/nativescript/nativescript). The modules are [distributed through npm as a “tns-core-modules” package](https://www.npmjs.com/package/tns-core-modules), which all NativeScript apps depend on. Because the NativeScript modules are open source, you are welcome to [contribute changes](https://www.nativescript.org/contribute).
 
@@ -81,9 +81,9 @@ Now that you have this code in place, let’s discuss what happens on this line:
 this.page.actionBarHidden = true;
 ```
 
-This code uses an instance of the [`Page` class](https://docs.nativescript.org/api-reference/classes/_ui_page_.page.html) from the [NativeScript page module](https://docs.nativescript.org/api-reference/modules/_ui_page_.html), and sets its `actionBarHidden` property to `true`, which hides the ActionBar that shows by default on Android devices.
+This code uses an instance of the [`Page` class](https://docs.nativescript.org/api-reference/classes/page.html), and sets its `actionBarHidden` property to `true`, which hides the ActionBar that shows by default on Android devices.
 
-Although you can peruse the [NativeScript API documentation](http://docs.nativescript.org/api-reference/globals.html) for a full list of these properties and what they do, if you’re using a TypeScript-friendly IDE, you can get a full list of these properties at any point. You can see this behavior in NativeScript Playground as you type `this.page.` while editing your `login.component.ts` file.
+Although you can peruse the [NativeScript API documentation](https://docs.nativescript.org/api-reference/) for a full list of these properties and what they do, if you’re using a TypeScript-friendly IDE, you can get a full list of these properties at any point. You can see this behavior in NativeScript Playground as you type `this.page.` while editing your `login.component.ts` file.
 
 Let’s make one last change to complete your login page, and this time we’ll use some new Angular syntax.
 
@@ -123,17 +123,17 @@ At this point in the tutorial your login screen is now complete. You’re welcom
 
 ### Step 12. Introducing NativeScript UI
 
-In addition to the NativeScript [core user interface components](https://docs.nativescript.org/ui/components), many of which you’ve used throughout this guide, NativeScript additionally provides a collection of free, professional components collectively known as [NativeScript UI](https://www.nativescript.org/ui-for-nativescript).
+In addition to the NativeScript [core user interface components](https://docs.nativescript.org/ui-and-styling#components), many of which you’ve used throughout this guide, NativeScript additionally provides a collection of free, professional components collectively known as [NativeScript UI](https://v7.docs.nativescript.org/angular/ui/overview#nativescript-ui-overview).
 
 NativeScript UI contains controls for building drawers, listviews, calendars, charts, forms, autocompletes, and more. In fact, the graph you saw back in lesson one of this tutorial was a NativeScript UI component. To show what NativeScript UI can do, let’s look at to use the suite’s listview control to start to add a grocery list to your app.
 
 #### Background: NativeScript plugins
 
-NativeScript UI is a NativeScript plugin. [NativeScript plugins](https://docs.nativescript.org/plugins/plugins) are npm packages with some added native functionality, such as the ability to leverage Android and iOS SDKs.
+NativeScript UI is a NativeScript plugin. [NativeScript plugins](https://v7.docs.nativescript.org/angular/core-concepts/plugins) are npm packages with some added native functionality, such as the ability to leverage Android and iOS SDKs.
 
 Because NativeScript plugins require full iOS and Android builds to use, normally you cannot use NativeScript plugins in the NativeScript Playground environment.
 
-However, a few NativeScript plugins have built-in support in NativeScript Playground, including NativeScript UI, [the accelerometer plugin](https://market.nativescript.org/plugins/nativescript-accelerometer), and the [geolocation plugin](https://market.nativescript.org/plugins/nativescript-geolocation). You can [learn more about using plugins on the NativeScript documentation](https://docs.nativescript.org/plugins/plugins), and you can [peruse available plugins on the NativeScript Marketplace](https://market.nativescript.org/plugins/nativescript-geolocation).
+However, a few NativeScript plugins have built-in support in NativeScript Playground, including NativeScript UI, [the accelerometer plugin](https://market.nativescript.org/plugins/nativescript-accelerometer), and the [geolocation plugin](https://market.nativescript.org/plugins/nativescript-geolocation). You can [learn more about using plugins on the NativeScript documentation](https://v7.docs.nativescript.org/angular/core-concepts/plugins), and you can [peruse available plugins on the NativeScript Marketplace](https://market.nativescript.org/plugins/nativescript-geolocation).
 
 #### End background
 
@@ -221,7 +221,7 @@ Let’s break down the template next.
 </RadListView>
 ```
 
-The [`<RadListView>` pro UI element](http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/ListView/overview) requires an `items` property that points to an array of data—in this case, the `groceryList` array you added to your `ListComponent` class. The list view element requires a child `<ng-template>` element that specifies how to render each item in the `items` array.
+The [`<RadListView>` pro UI element](https://v7.docs.nativescript.org/angular/ui/ng-components/ng-radlistview/overview) requires an `items` property that points to an array of data—in this case, the `groceryList` array you added to your `ListComponent` class. The list view element requires a child `<ng-template>` element that specifies how to render each item in the `items` array.
 
 The `let-*` syntax is Angular’s way of creating template variables within loops. You can think of the syntax working like TypeScript’s `let` keyword. This gives you the ability to refer to each item in the array as `item` within the template. For this template, you render each item in the array with a single `<Label>` UI element, and because of the `[text]="item.name"` binding, those labels contain the text from the `name` property of each of the items in `groceryList` TypeScript array.
 
@@ -231,7 +231,7 @@ The NativeScript Core Theme contains a number of class names that let you contro
 
 The class names follow a convention of margin/padding - top/bottom/left/right - amount. So for example, `<Label class="m-t-2">` renders a label with a `margin-top` of `2`, and `<Label class="p-b-5">` renders a label with a `padding-bottom` of `5`.
 
-Therefore, in the example above `<Label class="p-15">` applies `padding: 15` to the label. You can [learn more about these class names on the NativeScript docs](https://docs.nativescript.org/ui/theme#padding-and-margin).
+Therefore, in the example above `<Label class="p-15">` applies `padding: 15` to the label. You can [learn more about these class names on the NativeScript docs](https://v7.docs.nativescript.org/angular/ui/theme#padding-and-margin).
 
 #### End Background
 
@@ -466,8 +466,8 @@ Grid layouts can also divide the screen into columns, which is what the inner gr
 Here the `columns` attribute divides the top of the screen into two columns. The `col="0"` attribute puts the text field in the first column, and the `col="1"` attribute puts the “+” image in the last column. Grid layouts are the most commonly used NativeScript layout, so you may wish to take a minute to play around with the `columns` and `rows` attributes to figure out how they work.
 
 > **TIP**:
-> * You can nest any of the [NativeScript layouts](https://docs.nativescript.org/ui/layout-containers.html)—not just grid layouts.
-> * You can pass numbers, percentages, and a variety of other values to create more complex grid layouts. Refer to the [grid layout docs](https://docs.nativescript.org/ui/layout-containers.html#gridlayout) for more information.
+> * You can nest any of the [NativeScript layouts](https://docs.nativescript.org/ui-and-styling.html#layout-containers)—not just grid layouts.
+> * You can pass numbers, percentages, and a variety of other values to create more complex grid layouts. Refer to the [grid layout docs](https://docs.nativescript.org/ui-and-styling.html#gridlayout) for more information.
 
 Now that we have the UI ready, let’s make the add button work.
 
@@ -586,7 +586,7 @@ In this step you’ll leverage one feature of the `<RadListView>` control, which
 Because NativeScript UI has a lot of controls with a lot of features, it can be difficult to know where to start. Here are some recommendations.
 
 * If you’re a video learner, start by watching [a tour of NativeScript UI on YouTube](https://www.youtube.com/watch?v=4JJVOxybR4E).
-* If you like skimming documentation, the [NativeScript UI documentation](http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/overview) has a thorough list of the controls and the features they offer.
+* If you like skimming documentation, the [NativeScript UI documentation](https://v7.docs.nativescript.org/angular/ui/overview#nativescript-ui-overview) has a thorough list of the controls and the features they offer.
 * If you like getting your hands on code right away, the [NativeScript UI Angular sample](https://github.com/telerik/nativescript-ui-samples-angular/) is a sample app that shows off every feature of NativeScript UI in action.
 
 #### End Background
@@ -675,7 +675,7 @@ delete(id: string) {
 
 <hr data-action="end" />
 
-The NativeScript UI components have a ton of features that you can use to add powerful functionality to your applications. In the previous example you used the [`RadListView`’s swipe action capability](http://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/ListView/swipe-actions), which allows users to swipe on list items to perform actions.
+The NativeScript UI components have a ton of features that you can use to add powerful functionality to your applications. In the previous example you used the [`RadListView`’s swipe action capability](https://v7.docs.nativescript.org/angular/ui/ng-components/ng-radlistview/swipe-actions), which allows users to swipe on list items to perform actions.
 
 #### Background: Details on using swipe actions
 
@@ -686,7 +686,7 @@ To understand how this works, let’s start back with the opening `<RadListView>
   swipeActions="true" (itemSwipeProgressStarted)="onSwipeCellStarted($event)">
 ```
 
-Setting the `swipeActions` attribute to `true` is necessary to turn on the `<RadListView>`’s swipe behavior. From there, the control triggers [a number of events](http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/ListView/swipe-actions#swipe-actions) you can subscribe to configure exactly what you want to happen during swipes.
+Setting the `swipeActions` attribute to `true` is necessary to turn on the `<RadListView>`’s swipe behavior. From there, the control triggers [a number of events](https://v7.docs.nativescript.org/angular/ui/ng-components/ng-radlistview/swipe-actions#swipe-actions) you can subscribe to configure exactly what you want to happen during swipes.
 
 The only event you must subscribe to is the `itemSwipeProgressStarted` event, as you have to set a few values that control exactly how the swipe will work. With that in mind let’s look at your `onSwipeCellStarted` method and what it does.
 
@@ -705,7 +705,7 @@ The key here are the three lines of code at the bottom that set `right`, `left`,
 
 In this example you’re saying the user should be able to swipe right for a distance that’s equal to the width of the delete button, that the user shouldn’t be able to swipe left, and that the user should be able to swipe half the width of the delete button before the button stays open.
 
-> **NOTE**: Another popular way to configure swipe functionality is to perform an action automatically on swipe, without requiring the user to explicitly tap a button. The `<RadListView>` control supports this approach, and you read more about it on the [NativeScript UI documentation on the topic](http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/ListView/swipe-actions#swipe-actions).
+> **NOTE**: Another popular way to configure swipe functionality is to perform an action automatically on swipe, without requiring the user to explicitly tap a button. The `<RadListView>` control supports this approach, and you read more about it on the [NativeScript UI documentation on the topic](https://v7.docs.nativescript.org/angular/ui/ng-components/ng-radlistview/swipe-actions#swipe-actions).
 
 #### End Background
 
@@ -715,7 +715,7 @@ Now that users can both add and delete groceries from a list, let’s finish up
 
 Currently there's a bit of a delay when you first visit the list page before groceries appear. This delay could confuse a new user, who might think the app is stuck rather than retrieving data from a backend.
 
-In NativeScript apps you can use the [ActivityIndicator](https://docs.nativescript.org/api-reference/classes/_ui_activity_indicator_.activityindicator.html) module to show a spinner icon in your UI while your app is busy performing actions. The `<ActivityIndicator>` is a relatively simple UI element as it primarily uses one attribute—`busy`. When an `<ActivityIndicator>`’s `busy` attribute is set to `true` the `<ActivityIndicator>` shows, and when its `busy` attribute is set to `false` it doesn't. Let's see how the module works by adding an `<ActivityIndicator>` to the list page.
+In NativeScript apps you can use the [ActivityIndicator](https://docs.nativescript.org/ui-and-styling.html#activity-indicator) module to show a spinner icon in your UI while your app is busy performing actions. The `<ActivityIndicator>` is a relatively simple UI element as it primarily uses one attribute—`busy`. When an `<ActivityIndicator>`’s `busy` attribute is set to `true` the `<ActivityIndicator>` shows, and when its `busy` attribute is set to `false` it doesn't. Let's see how the module works by adding an `<ActivityIndicator>` to the list page.
 
 <hr data-action="start" />
 
@@ -772,13 +772,13 @@ To finish off this tutorial you’re going to add one last feature to polish the
 
 ### Step 16. Creating engaging animations
 
-The ability to run robust and performant animations is one of the biggest reasons people choose to build native mobile apps, and NativeScript makes running these animations simple. The NativeScript animation module provides a [series of JavaScript APIs](https://docs.nativescript.org/angular/ui/animation) that let you perform a wide variety of animations to elements on the screen, including the following:
+The ability to run robust and performant animations is one of the biggest reasons people choose to build native mobile apps, and NativeScript makes running these animations simple. The NativeScript animation module provides a [series of JavaScript APIs](https://docs.nativescript.org/interaction.html#animations) that let you perform a wide variety of animations to elements on the screen, including the following:
 
-- [Opacity](https://docs.nativescript.org/angular/ui/animation-examples#opacity)
-- [Background Color](https://docs.nativescript.org/angular/ui/animation-examples#background-color)
-- [Translations](https://docs.nativescript.org/angular/ui/animation-examples#translate)
-- [Scaling](https://docs.nativescript.org/angular/ui/animation-examples#scale)
-- [Rotating](https://docs.nativescript.org/angular/ui/animation-examples#rotate)
+- [Opacity](https://docs.nativescript.org/interaction.html#animated-opacity)
+- [Background Color](https://docs.nativescript.org/interaction.html#animate-background-color)
+- [Translations](https://docs.nativescript.org/interaction.html#animate-position)
+- [Scaling](https://docs.nativescript.org/interaction.html#animate-scale)
+- [Rotating](https://docs.nativescript.org/interaction.html#animate-rotate)
 
 Let’s add a simple animation that fades in the list page’s `<ListView>` so you can see how this works.
 
@@ -805,7 +805,7 @@ ListView {
 
 This code sets the starting opacity value of the `<ListView>` to `0` so that the control is hidden when the page loads. The code also defines a `visible` class name that changes the `opacity` of an element from `0` to `1` over one full second.
 
-> **TIP**: For background on how the CSS animations syntax works, feel free to refer to the [NativeScript CSS animation documentation](https://docs.nativescript.org/angular/ui/animation-css), or [external CSS animation guides](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations).
+> **TIP**: For background on how the CSS animations syntax works, feel free to refer to the [NativeScript CSS animation documentation](https://docs.nativescript.org/interaction.html#css-animations), or [external CSS animation guides](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations).
 
 * **b.** Now that you have the CSS in place, your next step is to add the previously defined `"visible"` class name to the `<ListView>` control after data has loaded. To do that, start by opening `app/list/list.component.ts` and adding the following new property right below the existing `isLoading = false;` line.
 
@@ -847,7 +847,7 @@ The key here is the list view’s `[class.visible]="listLoaded"` binding, which
 
 The advantage of using CSS animations is that you avoid the need to reference specific UI elements in your TypeScript code; there was no need to create a local template variable. The CSS animation approach also helps to keep your code decoupled. Your TypeScript code can focus on logic, and leave styling concerns to your CSS code.
 
-> **TIP**: There’s a lot more you can do with NativeScript animations—look over the [NativeScript animation documentation](https://docs.nativescript.org/angular/ui/animation) to get an idea of what you can do.
+> **TIP**: There’s a lot more you can do with NativeScript animations—look over the [NativeScript animation documentation](https://docs.nativescript.org/interaction.html#animations) to get an idea of what you can do.
 
 CSS animations are an easy way to add powerful animation to your code using syntax you might be familiar with from the web.
 

From 7132b14f7369c7cb2c5e869c0047a126d7563591 Mon Sep 17 00:00:00 2001
From: lisa-wolfgang <43426138+lisa-wolfgang@users.noreply.github.com>
Date: Sun, 23 May 2021 11:46:01 -0500
Subject: [PATCH 07/12] Fix broken link

---
 getting-started-vue/05.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/getting-started-vue/05.md b/getting-started-vue/05.md
index df47122..65eb21c 100644
--- a/getting-started-vue/05.md
+++ b/getting-started-vue/05.md
@@ -81,7 +81,7 @@ dones: [],
 
 Out of the box, the `<ListView>` component detects a tap gesture for every item and emits an event for it. The event carries information about the index of the tapped array item and the array item itself. To let the user choose the outcome of a tap gesture and expand the functionality of your app, you can tie a dialog to the event.
 
-[`dialogs`](https://docs.nativescript.org/api-reference/modules/_ui_dialogs_) is a globally available module that provides several configurable dialog types for apps: alert, action, prompt, login, confirmation. This lesson explores the use of [`action()`](https://nativescript-vue.org/en/docs/elements/dialogs/action/) to let the user choose if they want to mark a task as completed or delete it from the list of active tasks.
+[`DialogStrings`](https://docs.nativescript.org/api-reference/modules/dialogstrings.html) is a globally available module that provides several configurable dialog types for apps: alert, action, prompt, login, confirmation. This lesson explores the use of [`action()`](https://nativescript-vue.org/en/docs/elements/dialogs/action/) to let the user choose if they want to mark a task as completed or delete it from the list of active tasks.
 Use an `action()` dialog to prompt users to select what they want to do with an active task: complete it, delete it, or dismiss the dialog.
 
 <hr data-action="start" />

From eeb10d646e42d8efd4aaf9051740d32ddbc34599 Mon Sep 17 00:00:00 2001
From: lisa-wolfgang <43426138+lisa-wolfgang@users.noreply.github.com>
Date: Sun, 23 May 2021 11:47:06 -0500
Subject: [PATCH 08/12] Fix broken link

---
 getting-started-vue/07.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/getting-started-vue/07.md b/getting-started-vue/07.md
index 9c3af72..6f660af 100644
--- a/getting-started-vue/07.md
+++ b/getting-started-vue/07.md
@@ -2,7 +2,7 @@
 
 ### Step 15. Remove existing CSS
 
-When you work with NativeScript and Vue.js, you can use application-wide CSS, scoped CSS, or inline CSS to style your app. Application-wide CSS is applied first and is handled in `app.css` in the root of your project. This tutorial does not explore application-wide CSS. See also: [Styling](https://docs.nativescript.org/ui/styling).
+When you work with NativeScript and Vue.js, you can use application-wide CSS, scoped CSS, or inline CSS to style your app. Application-wide CSS is applied first and is handled in `app.css` in the root of your project. This tutorial does not explore application-wide CSS. See also: [Styling](https://docs.nativescript.org/ui-and-styling.html#css).
 
 Scoped CSS is applied to the scope of the current `.vue` file only and is handled in its `<style scoped>` block. This tutorial relies almost exclusively on scoped CSS and inline CSS. See also: [Scoped CSS](https://vue-loader.vuejs.org/guide/scoped-css.html).
 
@@ -99,4 +99,4 @@ TextField {
 }
 ```
 
-<hr data-action="end" />
\ No newline at end of file
+<hr data-action="end" />

From ec0acc81d16aa97de92050fc7081c8c7f4fe5db7 Mon Sep 17 00:00:00 2001
From: lisa-wolfgang <43426138+lisa-wolfgang@users.noreply.github.com>
Date: Sun, 23 May 2021 11:49:26 -0500
Subject: [PATCH 09/12] Fix broken link

---
 getting-started-vue/12.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/getting-started-vue/12.md b/getting-started-vue/12.md
index bf0cfc7..24ce687 100644
--- a/getting-started-vue/12.md
+++ b/getting-started-vue/12.md
@@ -4,9 +4,9 @@
 
 Congratulations! You successfully built a ToDo application with NativeScript and Vue.js. If you’re looking to learn more, here are a few features you can try implementing on your own:
  
-* Save the users’ todos so they don’t go away every time the app restarts. You can use the [NativeScript application settings module](https://docs.nativescript.org/ns-framework-modules/application-settings).
+* Save the users’ todos so they don’t go away every time the app restarts. You can use the [NativeScript application settings module](https://v7.docs.nativescript.org/ns-framework-modules/application-settings).
 * Allow users to share their lists using the [NativeScript social share plugin](https://market.nativescript.org/plugins/nativescript-social-share).
 
 > **TIP:**
 > * You can always browse the [code samples in the NativeScript Marketplace](https://market.nativescript.org/?tab=samples&framework=all_frameworks&category=all_samples) to come up with even more things to try out in your app.
-> * The final state of this tutorial is available [here](https://play.nativescript.org/?template=play-vue&id=S3fNJW&v=2), in case you got lost at any point.
\ No newline at end of file
+> * The final state of this tutorial is available [here](https://play.nativescript.org/?template=play-vue&id=S3fNJW&v=2), in case you got lost at any point.

From 6adc492d394bea685ba6e7a1f258a6198dce6125 Mon Sep 17 00:00:00 2001
From: lisa-wolfgang <43426138+lisa-wolfgang@users.noreply.github.com>
Date: Sun, 23 May 2021 11:52:33 -0500
Subject: [PATCH 10/12] Update v6 API links to current website

---
 groceries-ng/2.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/groceries-ng/2.md b/groceries-ng/2.md
index ad105e2..dd8aadc 100644
--- a/groceries-ng/2.md
+++ b/groceries-ng/2.md
@@ -35,7 +35,7 @@ export class AppComponent {
 The `(eventName)="functionName()"` syntax is part of [Angular’s event binding system](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding), which lets you bind an event that occurs on a UI element to a function in your component’s class. In this case, the `(tap)="submit()"` syntax tells Angular to run the `AppComponent` class’s `submit()` function whenever the user taps the sign in button.
 
 > **TIP**:
-> * You can find a list of events available for each UI element on its API documentation page. For instance, the [button element’s API documentation](https://v6.docs.nativescript.org/api-reference/classes/_ui_core_view_.view.html) lists its `tap` event.
+> * You can find a list of events available for each UI element on its API documentation page. For instance, the [button element’s API documentation](https://docs.nativescript.org/api-reference/classes/button.html) lists its `tap` event.
 > * The Angular docs have a helpful [cheat sheet](https://angular.io/docs/ts/latest/guide/cheatsheet.html) that includes the various syntaxes available when building templates. Don’t worry too much about knowing how all these work at the moment; you’ll use the most common syntaxes as you complete this guide.
 
 With the `tap` event in place, you now have a way of tying the UI elements in your template to your TypeScript code. To make a login page actually work though, we need to introduce one other way of connecting a template to code: data binding.

From 35dfc5dcefe4c05ac64fb9f3eb2825438f30857d Mon Sep 17 00:00:00 2001
From: lisa-wolfgang <43426138+lisa-wolfgang@users.noreply.github.com>
Date: Sun, 23 May 2021 11:55:18 -0500
Subject: [PATCH 11/12] Update v6 API link to current website

---
 groceries-js/3.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/groceries-js/3.md b/groceries-js/3.md
index 9107dec..9215a23 100644
--- a/groceries-js/3.md
+++ b/groceries-js/3.md
@@ -125,7 +125,7 @@ exports.signIn = function() {
 
 #### Background: Component Inheritance
 
-All NativeScript UI components, including `<Page>`, inherit from the [`View` class](https://v6.docs.nativescript.org/api-reference/classes/_ui_core_view_.view.html), which gives them a number of methods for working the UI. In this case you use the [`getViewById()` method](https://v6.docs.nativescript.org/api-reference/classes/_ui_core_view_.view.html#getviewbyid) to get a reference to the email text field by its `id` attribute.
+All NativeScript UI components, including `<Page>`, inherit from the [`View` class](https://docs.nativescript.org/api-reference/classes/view.html), which gives them a number of methods for working the UI. In this case you use the [`getViewById()` method](https://docs.nativescript.org/api-reference/classes/view.html#getviewbyid) to get a reference to the email text field by its `id` attribute.
 
 #### End Background
 

From 30614e71e46f793948e4b180d8c5e9f7b4e722d6 Mon Sep 17 00:00:00 2001
From: lisa-wolfgang <43426138+lisa-wolfgang@users.noreply.github.com>
Date: Sun, 23 May 2021 12:01:21 -0500
Subject: [PATCH 12/12] v6 API to current website, v7 Angular to v7 JS

---
 groceries-js/4.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/groceries-js/4.md b/groceries-js/4.md
index 6a2ebbd..150862e 100644
--- a/groceries-js/4.md
+++ b/groceries-js/4.md
@@ -10,7 +10,7 @@ Each UI component has a set of properties and methods you can use to customize y
 
 #### Background: NativeScript modules
 
-All NativeScript UI components are implemented as NativeScript modules, which are a series of TypeScript modules you use to add powerful functionality to your apps. There are a [lot of these modules](https://v7.docs.nativescript.org/angular/core-concepts/modules), and you will use several of them as you complete this tutorial.
+All NativeScript UI components are implemented as NativeScript modules, which are a series of TypeScript modules you use to add powerful functionality to your apps. There are a [lot of these modules](https://v7.docs.nativescript.org/core-concepts/modules), and you will use several of them as you complete this tutorial.
 
 The source code for the NativeScript modules lives on GitHub in the [NativeScript/NativeScript repo](https://github.com/nativescript/nativescript). The modules are [distributed through npm as a “tns-core-modules” package](https://www.npmjs.com/package/tns-core-modules), which all NativeScript apps depend on. Because the NativeScript modules are open source, you are welcome to [contribute changes](https://www.nativescript.org/contribute).
 
@@ -37,7 +37,7 @@ page.actionBarHidden = true;
 
 #### Background: About the Page class
 
-This code uses an instance of the [`Page` class](https://v6.docs.nativescript.org/api-reference/classes/_ui_page_.page.html) from the [NativeScript page module](https://v6.docs.nativescript.org/api-reference/modules/_ui_page_.html), and sets its `actionBarHidden` property to `true`, which hides the ActionBar that shows by default on Android devices.
+This code uses an instance of the [`Page` class](https://docs.nativescript.org/api-reference/classes/page.html), and sets its `actionBarHidden` property to `true`, which hides the ActionBar that shows by default on Android devices.
 
 #### End Background
 
@@ -156,7 +156,7 @@ Now, you have a much better user experience, with the screen color clearly indic
 
 ### Step 15. Introducing NativeScript UI
 
-In addition to the NativeScript [core user interface components](https://docs.nativescript.org/ui-and-styling.html#components), many of which you’ve used throughout this guide, NativeScript additionally provides a collection of free, professional components collectively known as [NativeScript UI](https://v7.docs.nativescript.org/angular/ui/overview#nativescript-ui-overview).
+In addition to the NativeScript [core user interface components](https://docs.nativescript.org/ui-and-styling.html#components), many of which you’ve used throughout this guide, NativeScript additionally provides a collection of free, professional components collectively known as [NativeScript UI](https://v7.docs.nativescript.org/ui/overview#nativescript-ui-overview).
 
 NativeScript UI contains controls for building drawers, listviews, calendars, charts, forms, autocompletes, and more. In fact, the graph you saw back in lesson one of this tutorial was a NativeScript UI component. To show what NativeScript UI can do, let’s use the suite’s listview control to start to add a grocery list to your app.
 
@@ -520,7 +520,7 @@ In this step you’ll leverage one feature of the `<RadListView>` control, which
 Because NativeScript UI has a lot of controls with a lot of features, it can be difficult to know where to start. Here are some recommendations.
 
 * If you’re a video learner, start by watching [a tour of NativeScript UI on YouTube](https://www.youtube.com/watch?v=4JJVOxybR4E).
-* If you like skimming documentation, the [NativeScript UI documentation](https://v7.docs.nativescript.org/angular/ui/overview#nativescript-ui-overview) has a thorough list of the controls and the features they offer.
+* If you like skimming documentation, the [NativeScript UI documentation](https://v7.docs.nativescript.org/ui/overview#nativescript-ui-overview) has a thorough list of the controls and the features they offer.
 
 Let's build out the delete functionality. We're going to enhance our current implementation of the RadListView to enable a swipe event, so that when you swipe left, a red box with an 'x' appears. Tap the 'x' and delete the item.
 
@@ -648,7 +648,7 @@ Now that users can both add and delete groceries from a list, let’s finish up
 
 Currently there's a bit of a delay when you first visit the list page before groceries appear. This delay could confuse a new user, who might think the app is stuck rather than retrieving data from a backend.
 
-In NativeScript apps you can use the [ActivityIndicator](https://v6.docs.nativescript.org/api-reference/classes/_ui_activity_indicator_.activityindicator.html) module to show a spinner icon in your UI while your app is busy performing actions. The `<ActivityIndicator>` is a relatively simple UI element as it primarily uses one attribute—`busy`. When an `<ActivityIndicator>`’s `busy` attribute is set to `true` the `<ActivityIndicator>` shows, and when its `busy` attribute is set to `false` it doesn't. Let's see how the module works by adding an `<ActivityIndicator>` to the list page.
+In NativeScript apps you can use the [ActivityIndicator](https://docs.nativescript.org/ui-and-styling.html#activity-indicator) module to show a spinner icon in your UI while your app is busy performing actions. The `<ActivityIndicator>` is a relatively simple UI element as it primarily uses one attribute—`busy`. When an `<ActivityIndicator>`’s `busy` attribute is set to `true` the `<ActivityIndicator>` shows, and when its `busy` attribute is set to `false` it doesn't. Let's see how the module works by adding an `<ActivityIndicator>` to the list page.
 
 <hr data-action="start" />