diff --git a/en/components/avatar.md b/en/components/avatar.md
index ed2fa74802..607782b35a 100644
--- a/en/components/avatar.md
+++ b/en/components/avatar.md
@@ -22,7 +22,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
 
 ### Usage
 
-To get started with the Ignite UI for Angular Avatar, let's first import the [`IgxAvatarModule`]({environment:angularApiUrl}/classes/igxavatarmodule.html) in the **app.module.ts** file:
+To get started with the Ignite UI for Angular Avatar, let's first import the `IgxAvatarModule` in the **app.module.ts** file:
 
 ```typescript
 // app.module.ts
diff --git a/en/components/badge.md b/en/components/badge.md
index 19ffb32ff5..ac412812e9 100644
--- a/en/components/badge.md
+++ b/en/components/badge.md
@@ -21,7 +21,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
 > To start using Ignite UI for Angular components in your own projects, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this in the [**installation**](https://www.infragistics.com/products/ignite-ui-angular/getting-started#installation) topic.
 
 ###Usage
-To get started with the Ignite UI for Angular Badge, let's first import the [`IgxBadgeModule`]({environment:angularApiUrl}/classes/igxbadgemodule.html) in the **app.module.ts** file:
+To get started with the Ignite UI for Angular Badge, let's first import the `IgxBadgeModule` in the **app.module.ts** file:
 
 ```typescript
 // app.module.ts
diff --git a/en/components/button.md b/en/components/button.md
index e98147ee30..fa2fbe343b 100644
--- a/en/components/button.md
+++ b/en/components/button.md
@@ -20,7 +20,7 @@ The Button directive within Ignite UI for Angular is intended to be used on any
 
 ### Dependencies
 
-The Button Directive is exported as an `NgModule`, thus all you need to do in your application is to import the [`IgxButtonModule`]({environment:angularApiUrl}/classes/igxbuttonmodule.html) inside your `AppModule`:
+The Button Directive is exported as an `NgModule`, thus all you need to do in your application is to import the `IgxButtonModule` inside your `AppModule`:
 
 ```typescript
 // app.module.ts
diff --git a/en/components/buttonGroup.md b/en/components/buttonGroup.md
index fdf88a8088..e36713310d 100644
--- a/en/components/buttonGroup.md
+++ b/en/components/buttonGroup.md
@@ -20,7 +20,7 @@ The [**igx-buttongroup**]({environment:angularApiUrl}/classes/igxbuttongroupcomp
 
 ### Dependencies
 
-The Button Group is exported as an `NgModule`, thus you will need to import the [`IgxButtonGroupModule`]({environment:angularApiUrl}/classes/igxbuttongroupmodule.html) inside your `AppModule`:
+The Button Group is exported as an `NgModule`, thus you will need to import the `IgxButtonGroupModule` inside your `AppModule`:
 
 ```typescript
 // app.module.ts
diff --git a/en/components/calendar.md b/en/components/calendar.md
index 0d9125b4b9..4838cd929a 100644
--- a/en/components/calendar.md
+++ b/en/components/calendar.md
@@ -16,7 +16,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
 </div>
 
 ### Usage
-To get started with the **Ignite UI for Angular Calendar**, let's first import the [**IgxCalendarModule**]({environment:angularApiUrl}/classes/igxcalendarmodule.html) in the application's AppModule, typically this is the **app.module.ts** file. Note that the [**IgxCalendar**]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) is also dependent on the **BrowserAnimationsModule**, so it needs to be added to the AppModule as well:
+To get started with the **Ignite UI for Angular Calendar**, let's first import the `IgxCalendarModule` in the application's AppModule, typically this is the **app.module.ts** file. Note that the [**IgxCalendar**]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) is also dependent on the **BrowserAnimationsModule**, so it needs to be added to the AppModule as well:
 
 ```typescript
 // app.module.ts
@@ -44,7 +44,7 @@ import { IgxCalendarComponent } from 'igniteui-angular';
 > Consider using the [appropriate polyfills](https://github.com/andyearnshaw/Intl.js/) if your target platform does not support them.
 
 ### Selection
-Instantiating the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) is as easy as placing its selector element in the template. This will display the current month in the calendar and use single selection mode. We switch to any of the other selection modes - `multi` and `range`, by setting the [`selection`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#selection) property:
+Instantiating the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) is as easy as placing its selector element in the template. This will display the current month in the calendar and use single selection mode. We switch to any of the other selection modes - `multi` and `range`, by setting the [`selection`]({environment:angularApiUrl}/classes/igxcalendarbase.html#selection) property:
 ```html
 <!-- app.component.html -->
 <!-- Single selection mode -->
@@ -64,11 +64,11 @@ Notice that the calendar header is not rendered when the selection is either `mu
 
 ###Localization and formatting
 
-Due to their very nature, localization and formatting are essential to any calendar. In the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) those are controlled and customized through the following properties - [`locale`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#locale), [`formatOptions`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#formatoptions), [`formatViews`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#formatviews).
+Due to their very nature, localization and formatting are essential to any calendar. In the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) those are controlled and customized through the following properties - [`locale`]({environment:angularApiUrl}/classes/igxcalendarbase.html#locale), [`formatOptions`]({environment:angularApiUrl}/classes/igxcalendarbase.html#formatoptions), [`formatViews`]({environment:angularApiUrl}/classes/igxmonthpickerbase.html#formatviews).
 <br>
-Let's go ahead and try those along with other customizations from the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) API. Say we are having visitors on our page coming from countries from EFTA (European Free Trade Association) countries, so we need to display the calendar in the corresponding culture. First thing we need to set is the [`weekstart`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#weekstart), which controls the starting day of the week. It defaults to 0, which corresponds to Sunday, so we set a value of 1.
+Let's go ahead and try those along with other customizations from the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) API. Say we are having visitors on our page coming from countries from EFTA (European Free Trade Association) countries, so we need to display the calendar in the corresponding culture. First thing we need to set is the [`weekstart`]({environment:angularApiUrl}/classes/igxcalendarbase.html#weekstart), which controls the starting day of the week. It defaults to 0, which corresponds to Sunday, so we set a value of 1.
 
-In the markup below we are also binding the [`formatOptions`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#formatoptions) and [`formatViews`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#formatviews) properties to customize the display formatting. Finally we are binding the [`locale`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#locale) property to a value, based on the user's location choice:
+In the markup below we are also binding the [`formatOptions`]({environment:angularApiUrl}/classes/igxcalendarbase.html#formatoptions) and [`formatViews`]({environment:angularApiUrl}/classes/igxmonthpickerbase.html#formatviews) properties to customize the display formatting. Finally we are binding the [`locale`]({environment:angularApiUrl}/classes/igxcalendarbase.html#locale) property to a value, based on the user's location choice:
 
 ```html
 <!-- app.component.html -->
@@ -114,7 +114,7 @@ Great, we should now have a calendar with customized dates display that also cha
 </div>
 
 ### Events
-Let's build on top of that sample a bit. We will require the user to enter a date range that does not exceed 5 days. We need to change the [`selection`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#selection) mode of the calendar to "range" and prompt the user to correct the selection, if the range is not valid. To do this we will use the [`onSelection`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#onselection) event:
+Let's build on top of that sample a bit. We will require the user to enter a date range that does not exceed 5 days. We need to change the [`selection`]({environment:angularApiUrl}/classes/igxcalendarbase.html#selection) mode of the calendar to "range" and prompt the user to correct the selection, if the range is not valid. To do this we will use the [`onSelection`]({environment:angularApiUrl}/classes/igxcalendarbase.html#onselection) event:
 
 ```html
 <!-- app.component.html -->
@@ -125,7 +125,7 @@ Let's build on top of that sample a bit. We will require the user to enter a dat
 </igx-calendar>
 ```
 
-The value passed in the [`onSelection`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#onselection) event is the collection of dates selected, so we can read its length to base our logic upon it. If we alert the user for the invalid selection, we also reset the selection to contain only the first date from the range using the [`selectDate`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#selectdate) method:
+The value passed in the [`onSelection`]({environment:angularApiUrl}/classes/igxcalendarbase.html#onselection) event is the collection of dates selected, so we can read its length to base our logic upon it. If we alert the user for the invalid selection, we also reset the selection to contain only the first date from the range using the [`selectDate`]({environment:angularApiUrl}/classes/igxcalendarbase.html#selectdate) method:
 
 ```typescript
 // app.component.ts
@@ -229,7 +229,7 @@ Having implemented this conditional templating and date parsing we should get co
 </div>
 
 ### Disabled dates
-This section demonstrates the usage of [`disabledDates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#disableddates) functionallity. Different `single dates` or `range` elements could be added to Array, and passed to the [`disabledDates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#disableddates) descriptor.
+This section demonstrates the usage of [`disabledDates`]({environment:angularApiUrl}/classes/igxcalendarbase.html#disableddates) functionality. Different `single dates` or `range` elements could be added to Array, and passed to the [`disabledDates`]({environment:angularApiUrl}/classes/igxcalendarbase.html#disableddates) descriptor.
 
 ```typescript
 this.calendar.disabledDates = [{ type: DateRangeType.Between, dateRange: [
@@ -273,9 +273,9 @@ This is the result.
 
 ### Special dates
 
-[`Special dates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#specialdates) feature is using almost the same configuration principles as [`Disabled dates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#disableddates). The difference here is dates `styling` and `interaction`. You are able to select and focus [`Special dates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#specialdates).
+[`Special dates`]({environment:angularApiUrl}/classes/igxcalendarbase.html#specialdates) feature is using almost the same configuration principles as [`Disabled dates`]({environment:angularApiUrl}/classes/igxcalendarbase.html#disableddates). The difference here is dates `styling` and `interaction`. You are able to select and focus [`Special dates`]({environment:angularApiUrl}/classes/igxcalendarbase.html#specialdates).
 
-Lets add a [`Special dates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#specialdates) to our [`igxCalendar`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html), we are going to create a [`DateRangeDescriptor`]({environment:angularApiUrl}/interfaces/daterangedescriptor.html) item of type [`DateRangeType.Specific`]({environment:angularApiUrl}/enums/daterangetype.html#specific) and pass array of dates as [`dateRange`]({environment:angularApiUrl}/interfaces/daterangedescriptor.html#daterange):
+Lets add a [`Special dates`]({environment:angularApiUrl}/classes/igxcalendarbase.html#specialdates) to our [`igxCalendar`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html), we are going to create a [`DateRangeDescriptor`]({environment:angularApiUrl}/interfaces/daterangedescriptor.html) item of type [`DateRangeType.Specific`]({environment:angularApiUrl}/enums/daterangetype.html#specific) and pass array of dates as [`dateRange`]({environment:angularApiUrl}/interfaces/daterangedescriptor.html#daterange):
 
 ```typescript
 export class CalendarSample7Component {
diff --git a/en/components/checkbox.md b/en/components/checkbox.md
index f3b0e352b7..0e8f9874d3 100644
--- a/en/components/checkbox.md
+++ b/en/components/checkbox.md
@@ -20,7 +20,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
 ### Usage
 At its core, the checkbox component allows for a choice between selected/unselected state. The default styling is done according to the selection controls specification as per the Material Design guidelines.
 
-To get started with the Ignite UI for Angular Checkbox import the [`IgxCheckboxModule`]({environment:angularApiUrl}/classes/igxcheckboxmodule.html) in the **app.module.ts** file:
+To get started with the Ignite UI for Angular Checkbox import the `IgxCheckboxModule` in the **app.module.ts** file:
 
 ```typescript
 // app.module.ts
diff --git a/en/components/date_picker.md b/en/components/date_picker.md
index 0ca4d62480..d2d28d772d 100644
--- a/en/components/date_picker.md
+++ b/en/components/date_picker.md
@@ -21,7 +21,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
 > To start using Ignite UI for Angular components in your own projects, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this in the [**installation**](https://www.infragistics.com/products/ignite-ui-angular/getting-started#installation) topic.
 
 ### Usage
-By default, the [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) allows you to pick a date from a calendar. The picker uses the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) internally as a calendar. To get started with the Ignite UI for Angular Date Picker, let's first import the [**IgxDatePickerModule**]({environment:angularApiUrl}/classes/igxdatepickermodule.html) in our **app.module.ts** file:
+By default, the [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) allows you to pick a date from a calendar. The picker uses the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) internally as a calendar. To get started with the Ignite UI for Angular Date Picker, let's first import the `IgxDatePickerModule` in our **app.module.ts** file:
 
 ```typescript
 // app.module.ts
@@ -142,7 +142,7 @@ Here is the formatted date:
 <div class="divider--half"></div>
 
 #### Dropdown mode
-By default, the date picker is displayed in read-only dialog mode. To change it to editable dropdown mode, set the [`mode`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#mode) input to `dropdown`.
+By default, the date picker is displayed in read-only dialog mode. To change it to editable dropdown mode, set the [`mode`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#mode) input to [`dropdown`]({environment:angularApiUrl}/enums/interactionmode.html#dropdown).
 
 ```html
 <!-- date-picker-sample.component.html -->
@@ -166,8 +166,8 @@ The editable drop-down date picker provides the following outputs to handle the
 
 | Output | Arguments | Description | 
 | ------------- |:-------------:|:-------------:|
-| [`onDisabledDate`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#ondisableddate) | `IDatePickerDisabledDateEventArgs` | Fires when the user types/spins a disabled date in the date picker editor. |
-| [`onValidationFailed`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#onvalidationfailed) | `IDatePickerValidationFailedEventArgs` | Fires when the user types/spins invalid date in the date picker editor. |
+| [`onDisabledDate`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#ondisableddate) | [`IDatePickerDisabledDateEventArgs`]({environment:angularApiUrl}/interfaces/idatepickerdisableddateeventargs.html) | Fires when the user types/spins a disabled date in the date picker editor. |
+| [`onValidationFailed`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#onvalidationfailed) | [`IDatePickerValidationFailedEventArgs`]({environment:angularApiUrl}/interfaces/idatepickervalidationfailedeventargs.html) | Fires when the user types/spins invalid date in the date picker editor. |
 
 ##### Keyboard Navigation
 * To open the date picker drop-down: 
diff --git a/en/components/icon.md b/en/components/icon.md
index 1815cee369..0945c1e43e 100644
--- a/en/components/icon.md
+++ b/en/components/icon.md
@@ -22,7 +22,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
 
 ### Dependencies
 
-The Icon component is exported as an `NgModule`, thus all you need to do in your application is to import the [`IgxIconModule`]({environment:angularApiUrl}/classes/igxiconmodule.html) inside your `AppModule`:
+The Icon component is exported as an `NgModule`, thus all you need to do in your application is to import the `IgxIconModule` inside your `AppModule`:
 
 ```typescript
 // app.module.ts
diff --git a/en/components/label_input.md b/en/components/label_input.md
index aff5da6d8b..537c7a4d4c 100644
--- a/en/components/label_input.md
+++ b/en/components/label_input.md
@@ -26,7 +26,7 @@ The default styling of the Label and Input directives follows the text fields sp
 > [!NOTE]
 > To use [`igxInput`]({environment:angularApiUrl}/classes/igxinputdirective.html) and `igxLabel`, you have to wrap them in an `<igx-input-group>` container.
 
-To get started with the Ignite UI for Angular Label & Input, let's first import the [`IgxInputGroupModule`]({environment:angularApiUrl}/classes/igxinputgroupmodule.html) in our **app.module.ts** file:
+To get started with the Ignite UI for Angular Label & Input, let's first import the `IgxInputGroupModule` in our **app.module.ts** file:
 
 ```typescript
 // app.module.ts
diff --git a/en/components/mask.md b/en/components/mask.md
index d9f8a8ff5d..5925c46687 100644
--- a/en/components/mask.md
+++ b/en/components/mask.md
@@ -22,7 +22,7 @@ By applying [`igxMask`]({environment:angularApiUrl}/classes/igxmaskdirective.htm
 
 ### Usage
 [`igxMask`]({environment:angularApiUrl}/classes/igxmaskdirective.html) directive is used on an input of type **text**.
-To get started with the Ignite UI for Angular Mask directive, let's first import the [`IgxMaskModule`]({environment:angularApiUrl}/classes/igxmaskmodule.html) and [`IgxInputGroupModule`]({environment:angularApiUrl}/classes/igxinputgroupmodule.html) in our **app.module.ts** file.
+To get started with the Ignite UI for Angular Mask directive, let's first import the `IgxMaskModule` and `IgxInputGroupModule` in our **app.module.ts** file.
 
 ```typescript
 // app.module.ts
@@ -213,7 +213,7 @@ export class Person {
 ```
 
 #### Apply additional formatting on focus and blur
-In addition to the default mask behavior, the user can implement his own custom pipes and take advantage of the [`focusedValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#focusedValuePipe) and [`displayValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#displayValuePipe) input properties, to transform the value to a desired output when the input gets or loses focus. This will not affect the underlying model value. Let's demonstrate how this can be achieved!
+In addition to the default mask behavior, the user can implement his own custom pipes and take advantage of the [`focusedValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#focusedvaluepipe) and [`displayValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#displayvaluepipe) input properties, to transform the value to a desired output when the input gets or loses focus. This will not affect the underlying model value. Let's demonstrate how this can be achieved!
 
 Implement two pipes that will append/remove a '%' sign at the end of the displayed value:
 ```typescript
@@ -240,7 +240,7 @@ export class InputFormatPipe implements PipeTransform {
 }
 ```
 
-Pass an instance of each pipe to the [`focusedValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#focusedValuePipe) and [`displayValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#displayValuePipe) input properties as follows:
+Pass an instance of each pipe to the [`focusedValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#focusedvaluepipe) and [`displayValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#displayvaluepipe) input properties as follows:
 
 ```typescript
 value = 1230;
diff --git a/en/components/month_picker.md b/en/components/month_picker.md
index 1669b0c5f8..14e1ea7321 100644
--- a/en/components/month_picker.md
+++ b/en/components/month_picker.md
@@ -19,7 +19,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
 > To start using Ignite UI for Angular components in your own projects, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this in the [**installation**](https://www.infragistics.com/products/ignite-ui-angular/getting-started#installation) topic.
 
 ### Usage
-To get started with the **Ignite UI for Angular Month Picker**, let's first import the [**IgxCalendarModule**]({environment:angularApiUrl}/classes/igxcalendarmodule.html) in the application's AppModule, typically this is the **app.module.ts** file. Note that the [**IgxCalendar**]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) is also dependent on the **BrowserAnimationsModule**, so it needs to be added to the AppModule as well:
+To get started with the **Ignite UI for Angular Month Picker**, let's first import the `IgxCalendarModule` in the application's AppModule, typically this is the **app.module.ts** file. Note that the [`IgxCalendar`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) is also dependent on the **BrowserAnimationsModule**, so it needs to be added to the AppModule as well:
 
 ```typescript
 // app.module.ts
@@ -56,7 +56,7 @@ To add a month picker in a template, use the following code:
 ```
 
 #### Setting date
-Set a date to [`IgxMonthPickerComponent`]({environment:angularApiUrl}/classes/igxmonthpickercomponent.html) using the [`value`]({environment:angularApiUrl}/classes/igxmonthpickercomponent.html#value) input.
+Set a date to [`IgxMonthPickerComponent`]({environment:angularApiUrl}/classes/igxmonthpickercomponent.html) using the [`value`]({environment:angularApiUrl}/classes/igxcalendarbase.html#value) input.
 
 ```typescript
 // month-picker-sample.component.ts
@@ -79,7 +79,7 @@ To create a two-way data-binding, set `ngModel` like this:
 ```
 
 #### Formatting
-Change the month picker display format, using the `formatViews` and `formatOptions` inputs.
+Change the month picker display format, using the [`formatOptions`]({environment:angularApiUrl}/classes/igxcalendarbase.html#formatoptions) inputs.
 
 ```html
 <!-- month-picker-sample.component.html -->
@@ -106,7 +106,7 @@ Here is an example of modifying the default format options of the month picker:
 </div>
 
 #### Localization
-Use the `locale` input, to customize the month picker localization.
+Use the [`locale`]({environment:angularApiUrl}/classes/igxcalendarbase.html#locale) input, to customize the month picker localization.
 
 ```html
 <!-- month-picker-sample.component.html -->
diff --git a/en/components/radio_button.md b/en/components/radio_button.md
index 968cdae617..ae6e4177f1 100644
--- a/en/components/radio_button.md
+++ b/en/components/radio_button.md
@@ -22,7 +22,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
 #### Radio Button Usage
 
 At its core the radio button component allows for a single option selection. The default styling is done according to the selection controls specification as per the Material Design guidelines.
-To get started with the Ignite UI for Angular Radio, let's first import the [`IgxRadioModule`]({environment:angularApiUrl}/classes/igxradiomodule.html) in the **app.module.ts** file:
+To get started with the Ignite UI for Angular Radio, let's first import the `IgxRadioModule` in the **app.module.ts** file:
 
 ```typescript
 // app.module.ts
@@ -113,7 +113,7 @@ Try it! The final result would be something like that:
 
 #### Radio Group Usage
 
-The Radio Group Directive is exported as an `NgModule`, thus all you need to do in your application is to import the [`IgxRadioModule`]({environment:angularApiUrl}/classes/igxradiomodule.html) in the **app.module.ts** file:
+The Radio Group Directive is exported as an `NgModule`, thus all you need to do in your application is to import the `IgxRadioModule` in the **app.module.ts** file:
 
 ```typescript
 // app.module.ts
diff --git a/en/components/ripple.md b/en/components/ripple.md
index 7abbdc988f..9f988307ad 100644
--- a/en/components/ripple.md
+++ b/en/components/ripple.md
@@ -19,7 +19,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
 
 ### Dependencies
 
-The Ripple Directive is exported as an `NgModule`, thus all you need to do in your application is to import the [`IgxRippleModule`]({environment:angularApiUrl}/classes/igxripplemodule.html) inside your `AppModule`:
+The Ripple Directive is exported as an `NgModule`, thus all you need to do in your application is to import the `IgxRippleModule` inside your `AppModule`:
 
 ```typescript
 // app.module.ts
diff --git a/en/components/switch.md b/en/components/switch.md
index 62fdb1c400..f640a22bfc 100644
--- a/en/components/switch.md
+++ b/en/components/switch.md
@@ -20,7 +20,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
 ### Usage
 
 At its core the switch component allows for toggling between on/off state. The default styling is done according to the selection controls specification as per the Material Design guidelines.
-To get started with the Ignite UI for Angular Switch, let's first import the [`IgxSwitchModule`]({environment:angularApiUrl}/classes/igxswitchmodule.html) in the **app.module.ts** file:
+To get started with the Ignite UI for Angular Switch, let's first import the `IgxSwitchModule` in the **app.module.ts** file:
 
 ```typescript
 // app.module.ts
diff --git a/en/components/tabbar.md b/en/components/tabbar.md
index e7d04a935a..9a156237e8 100644
--- a/en/components/tabbar.md
+++ b/en/components/tabbar.md
@@ -10,7 +10,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
 <div class="divider"></div>
 
 > [!NOTE]
-> `igx-tab-bar` selector is deprecated. You could use [`igx-bottom-nav`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html) instead. `IgxTabBarComponent` class is renamed to [`IgxBottomNavComponent`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html). `IgxTabBarModule` is renamed to [`IgxBottomNavModule`]({environment:angularApiUrl}/classes/igxbottomnavmodule.html).
+> `igx-tab-bar` selector is deprecated. You could use [`igx-bottom-nav`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html) instead. `IgxTabBarComponent` class is renamed to [`IgxBottomNavComponent`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html). `IgxTabBarModule` is renamed to `IgxBottomNavModule`.
 
 ### Bottom Navigation Demo
 
@@ -27,7 +27,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
 
 ### Usage
 
-To get started with the control, let's first import the [`IgxBottomNavModule`]({environment:angularApiUrl}/classes/igxbottomnavmodule.html) in the **app.module.ts** file:
+To get started with the control, let's first import the `IgxBottomNavModule` in the **app.module.ts** file:
 
 ```typescript
 // app.module.ts
@@ -193,7 +193,7 @@ Here is an example:
 You can combine other Ignite UI for Angular components with the Bottom Navigation to achieve more complex applications.
 For example you may use the [`IgxListComponent`]({environment:angularApiUrl}/classes/igxlistcomponent.html) to create a list of contacts in a Bottom Navigation's panel and also visualize each contact using [`IgxAvatarComponent`]({environment:angularApiUrl}/classes/igxavatarcomponent.html) and [`IgxIconComponent`]({environment:angularApiUrl}/classes/igxiconcomponent.html).
 
-This time you will need to include both the [`IgxBottomNavModule`]({environment:angularApiUrl}/classes/igxbottomnavmodule.html) and [`IgxListModule`]({environment:angularApiUrl}/classes/igxlistmodule.html) in your "app.module.ts" file:
+This time you will need to include both the `IgxBottomNavModule` and `IgxListModule` in your "app.module.ts" file:
 
 ```typescript
 // app.module.ts
diff --git a/en/components/tabs.md b/en/components/tabs.md
index 2416ab6171..86c471ba7b 100644
--- a/en/components/tabs.md
+++ b/en/components/tabs.md
@@ -22,7 +22,7 @@ The [`igx-tabs`]({environment:angularApiUrl}/classes/igxtabscomponent.html) comp
 
 ### Usage
 
-To get started with the Ignite UI for Angular Tabs component, let's first import the [`IgxTabsModule`]({environment:angularApiUrl}/classes/igxtabsmodule.html) in the **app.module.ts** file.
+To get started with the Ignite UI for Angular Tabs component, let's first import the `IgxTabsModule` in the **app.module.ts** file.
 
 ```typescript
 // app.module.ts
diff --git a/en/components/time_picker.md b/en/components/time_picker.md
index c283b99f72..a3df1c48ac 100644
--- a/en/components/time_picker.md
+++ b/en/components/time_picker.md
@@ -19,7 +19,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
 
 ### Usage
 
-To get started with the Ignite UI for Angular Time Picker, let's first import the [`IgxTimePickerModule`]({environment:angularApiUrl}/classes/igxtimepickermodule.html) in the **app.module.ts** file. Note that the IgxTimePicker is also dependent on the **BrowserAnimationsModule**, so it needs to be added to the AppModule as well:
+To get started with the Ignite UI for Angular Time Picker, let's first import the `IgxTimePickerModule` in the **app.module.ts** file. Note that the IgxTimePicker is also dependent on the **BrowserAnimationsModule**, so it needs to be added to the AppModule as well:
 
 ```typescript
 // app.module.ts
@@ -154,7 +154,7 @@ And there we have it:
 
 #### Dropdown mode
 
-When you add the time picker to your project, its default mode is read-only dialog mode. To change the time picker mode to editable dropdown mode, set the [`mode`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#mode) input to `dropdown`:
+When you add the time picker to your project, its default mode is read-only dialog mode. To change the time picker mode to editable dropdown mode, set the [`mode`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#mode) input to [`dropdown`]({environment:angularApiUrl}/enums/interactionmode.html#dropdown):
 
 ```typescript
 // timePickerDropdown.component.ts
@@ -169,7 +169,7 @@ public mode = InteractionMode.DropDown;
 <igx-time-picker [mode]="mode"></igx-time-picker>
 ```
 
-or just change the `mode` in the time picker like this:
+or just change the [`mode`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#mode) in the time picker like this:
 
 ```html
 <!--timePickerDropdown.component.html-->
diff --git a/jp/components/avatar.md b/jp/components/avatar.md
index 86fc577d64..a2bff1e42b 100644
--- a/jp/components/avatar.md
+++ b/jp/components/avatar.md
@@ -22,7 +22,7 @@ _language: ja
 
 ### 使用方法
 
-Ignite UI for Angular Avatar を初期化する前に、[`IgxAvatarModule`]({environment:angularApiUrl}/classes/igxavatarmodule.html) を **app.module.ts** ファイルにインポートします。
+Ignite UI for Angular Avatar を初期化する前に、`IgxAvatarModule` を **app.module.ts** ファイルにインポートします。
 
 ```typescript
 // app.module.ts
diff --git a/jp/components/badge.md b/jp/components/badge.md
index ecada4167f..41a316f2cd 100644
--- a/jp/components/badge.md
+++ b/jp/components/badge.md
@@ -25,7 +25,7 @@ _language: ja
 
 ### 使用方法
 
-Ignite UI for Angular Badge を初期化する前に、[`IgxBadgeModule`]({environment:angularApiUrl}/classes/igxbadgemodule.html) を **app.module.ts** ファイルにインポートします。
+Ignite UI for Angular Badge を初期化する前に、`IgxBadgeModule` を **app.module.ts** ファイルにインポートします。
 
 ```typescript
 // app.module.ts
diff --git a/jp/components/button.md b/jp/components/button.md
index 5cb6e8d713..8f442df22d 100644
--- a/jp/components/button.md
+++ b/jp/components/button.md
@@ -22,7 +22,7 @@ Ignite UI for Angular Button ディレクティブを任意の button、span、d
 
 ### 依存関係
 
-Button ディレクティブは `NgModule` としてエクスポートされるため、アプリケーションで `AppModule` に [`IgxButtonModule`]({environment:angularApiUrl}/classes/igxbuttonmodule.html) をインポートする必要があります。
+Button ディレクティブは `NgModule` としてエクスポートされるため、アプリケーションで `AppModule` に `IgxButtonModule` をインポートする必要があります。
 
 ```typescript
 // app.module.ts
diff --git a/jp/components/buttonGroup.md b/jp/components/buttonGroup.md
index 0bf5b6d74e..a0b44cb0e8 100644
--- a/jp/components/buttonGroup.md
+++ b/jp/components/buttonGroup.md
@@ -21,7 +21,7 @@ Ignite UI for Angular [**igx-buttongroup**]({environment:angularApiUrl}/classes/
 
 ### 依存関係
 
-Button Group が `NgModule` としてエクスポートされるため、アプリケーションで `AppModule` に [`IgxButtonGroupModule`]({environment:angularApiUrl}/classes/igxbuttongroupmodule.html) をインポートする必要があります。
+Button Group が `NgModule` としてエクスポートされるため、アプリケーションで `AppModule` に `IgxButtonGroupModule` をインポートする必要があります。
 
 ```typescript
 // app.module.ts
diff --git a/jp/components/calendar.md b/jp/components/calendar.md
index 6ab58feaa5..d4a2954f3f 100644
--- a/jp/components/calendar.md
+++ b/jp/components/calendar.md
@@ -17,7 +17,7 @@ _language: ja
 </div>
 
 ### 使用方法
-Ignite UI for Angular Calendar を初期化する前に、[**IgxCalendarModule**]({environment:angularApiUrl}/classes/igxcalendarmodule.html) をアプリケーションの AppModule (**app.module.ts** ファイル) にインポートします。注: [**IgxCalendar**]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) に **BrowserAnimationsModule** の依存関係があるため、それを AppModule に追加する必要もあります。
+Ignite UI for Angular Calendar を初期化する前に、`IgxCalendarModule` をアプリケーションの AppModule (**app.module.ts** ファイル) にインポートします。注: [**IgxCalendar**]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) に **BrowserAnimationsModule** の依存関係があるため、それを AppModule に追加する必要もあります。
 
 ```typescript
 // app.module.ts
@@ -46,7 +46,7 @@ import { IgxCalendarComponent } from 'igniteui-angular';
 > 対象プラットフォームがその API をサポートしない場合、[適切なポリフィル](https://github.com/andyearnshaw/Intl.js/)を使用してください。
 
 ### 選択
-[`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) をインスタンス化するには、セレクター要素をテンプレートに追加します。カレンダーで現在の月が表示され、単一選択モードが使用されます。その他の選択モードに変更するには、[`selection`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#selection) プロパティを `multi` または `range` に設定します。
+[`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) をインスタンス化するには、セレクター要素をテンプレートに追加します。カレンダーで現在の月が表示され、単一選択モードが使用されます。その他の選択モードに変更するには、[`selection`]({environment:angularApiUrl}/classes/igxcalendarbase.html#selection) プロパティを `multi` または `range` に設定します。
 
 ```html
 <!-- app.component.html -->
@@ -69,11 +69,11 @@ import { IgxCalendarComponent } from 'igniteui-angular';
 
 ### ローカライズと書式設定
 
-カレンダーにおいてローカライズや書式設定はとても重要な要素です。[`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) では、その機能が [`locale`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#locale)、[`formatOptions`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#formatoptions)、および [`formatViews`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#formatviews) プロパティによって制御してカスタマイズ化されます。
+カレンダーにおいてローカライズや書式設定はとても重要な要素です。[`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) では、その機能が [`locale`]({environment:angularApiUrl}/classes/igxcalendarbase.html#locale)、[`formatOptions`]({environment:angularApiUrl}/classes/igxcalendarbase.html#formatoptions)、および [`formatViews`]({environment:angularApiUrl}/classes/igxmonthpickerbase.html#formatviews) プロパティによって制御してカスタマイズ化されます。
 <br>
-これらの設定に加え、[`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) API のその他のカスタマイズ機能も使用できます。EFTA (欧州自由貿易連合) 国内からページへアクセスする場合、カレンダーを対応するカルチャで表示する必要があります。最初に週の開始日を制御する [`weekstart`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#weekstart) を設定し、デフォルト値が 0 (日曜日) であるため、値を 1 に設定します。
+これらの設定に加え、[`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) API のその他のカスタマイズ機能も使用できます。EFTA (欧州自由貿易連合) 国内からページへアクセスする場合、カレンダーを対応するカルチャで表示する必要があります。最初に週の開始日を制御する [`weekstart`]({environment:angularApiUrl}/classes/igxcalendarbase.html#weekstart) を設定し、デフォルト値が 0 (日曜日) であるため、値を 1 に設定します。
 
-以下のマークアップは、[`formatOptions`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#formatoptions) および [`formatViews`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#formatviews) プロパティをバインドして表示書式設定をカスタマイズします。最後に、[`locale`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#locale) プロパティをユーザーの選択した場所に基づいて値にバインドします。
+以下のマークアップは、[`formatOptions`]({environment:angularApiUrl}/classes/igxcalendarbase.html#formatoptions) および [`formatViews`]({environment:angularApiUrl}/classes/igxmonthpickerbase.html#formatviews) プロパティをバインドして表示書式設定をカスタマイズします。最後に、[`locale`]({environment:angularApiUrl}/classes/igxcalendarbase.html#locale) プロパティをユーザーの選択した場所に基づいて値にバインドします。
 
 ```html
 <!-- app.component.html -->
@@ -120,7 +120,7 @@ public changeLocale(event) {
 </div>
 
 ### イベント
-このサンプルを拡張します。ユーザーが 5 日以下の日付範囲を入力する必要があります。カレンダーの [`selection`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#selection) モードを range に設定し、範囲が無効な場合にユーザーに選択を変更するための通知を表示する [`onSelection`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#onselection) イベントを使用します。
+このサンプルを拡張します。ユーザーが 5 日以下の日付範囲を入力する必要があります。カレンダーの [`selection`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#selection) モードを range に設定し、範囲が無効な場合にユーザーに選択を変更するための通知を表示する [`onSelection`]({environment:angularApiUrl}/classes/igxcalendarbase.html#onselection) イベントを使用します。
 
 ```html
 <!-- app.component.html -->
@@ -131,7 +131,7 @@ public changeLocale(event) {
 </igx-calendar>
 ```
 
-[`onSelection`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#onselection) イベントに渡した値が選択した日付のコレクションで、その長さに基づいてロジックを実行します。無効な選択をユーザーに通知する場合、選択を範囲の最初の日のみを含むために [`selectDate`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#selectdate) メソッドを使用してリセットします。
+[`onSelection`]({environment:angularApiUrl}/classes/igxcalendarbase.html#onselection) イベントに渡した値が選択した日付のコレクションで、その長さに基づいてロジックを実行します。無効な選択をユーザーに通知する場合、選択を範囲の最初の日のみを含むために [`selectDate`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#selectdate) メソッドを使用してリセットします。
 
 ```typescript
 // app.component.ts
@@ -238,7 +238,7 @@ public getDatePart(val: any, component: any, datePart: string) {
 </div>
 
 ### 日付の無効化
-このセクションは、[`disabledDates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#disableddates) 機能の使用について説明します。型 [DateRangeDescriptor]({environment:angularApiUrl}/interfaces/daterangedescriptor.html) の `single dates` または `range` 要素を Array に追加して [`disabledDates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#disableddates) 記述子に渡します。
+このセクションは、[`disabledDates`]({environment:angularApiUrl}/classes/igxcalendarbase.html#disableddates) 機能の使用について説明します。型 [DateRangeDescriptor]({environment:angularApiUrl}/interfaces/daterangedescriptor.html) の `single dates` または `range` 要素を Array に追加して [`disabledDates`]({environment:angularApiUrl}/classes/igxcalendarbase.html#disableddates) 記述子に渡します。
 
 ```typescript
 this.calendar.disabledDates = [new DateRangeDescriptor(DateRangeType.Between, [
@@ -282,9 +282,9 @@ export class CalendarSample6Component {
 
 ### 特定の日付
 
-[`Special dates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#specialdates) 機能は、[`Disabled dates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#disableddates) とほとんど同じ構成を使用します。違いは、日付の `styling` と `interaction` です。また [`Special dates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#specialdates) の選択やフォーカスが可能です。
+[`Special dates`]({environment:angularApiUrl}/classes/igxcalendarbase.html#specialdates) 機能は、[`Disabled dates`]({environment:angularApiUrl}/classes/igxcalendarbase.html#disableddates) とほとんど同じ構成を使用します。違いは、日付の `styling` と `interaction` です。また [`Special dates`]({environment:angularApiUrl}/classes/igxcalendarbase.html#specialdates) の選択やフォーカスが可能です。
 
-[`Special dates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#specialdates) を [`igxCalendar`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) に追加し、[`DateRangeType.Specific`]({environment:angularApiUrl}/enums/daterangetype.html#specific) の [`DateRangeDescriptor`]({environment:angularApiUrl}/interfaces/daterangedescriptor.html) 項目を作成して [`dateRange`]({environment:angularApiUrl}/interfaces/daterangedescriptor.html#daterange) で日付の配列を渡します。
+[`Special dates`]({environment:angularApiUrl}/classes/igxcalendarbase.html#specialdates) を [`igxCalendar`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) に追加し、[`DateRangeType.Specific`]({environment:angularApiUrl}/enums/daterangetype.html#specific) の [`DateRangeDescriptor`]({environment:angularApiUrl}/interfaces/daterangedescriptor.html) 項目を作成して [`dateRange`]({environment:angularApiUrl}/interfaces/daterangedescriptor.html#daterange) で日付の配列を渡します。
 
 ```typescript
 export class CalendarSample7Component {
diff --git a/jp/components/checkbox.md b/jp/components/checkbox.md
index 8099aa32aa..a40db3346d 100644
--- a/jp/components/checkbox.md
+++ b/jp/components/checkbox.md
@@ -24,7 +24,7 @@ _language: ja
 
 チェックボックス コンポーネントは、選択/選択解除の状態の選択ができます。デフォルト スタイル設定はマテリアル デザイン ガイドラインの選択コントロールの仕様に基づきます。
 
-Ignite UI for Angular Checkbox を初期化する前に、[`IgxCheckboxModule`]({environment:angularApiUrl}/classes/igxcheckboxmodule.html) を **app.module.ts** ファイルにインポートします。
+Ignite UI for Angular Checkbox を初期化する前に、`IgxCheckboxModule` を **app.module.ts** ファイルにインポートします。
 
 ```typescript
 // app.module.ts
diff --git a/jp/components/date_picker.md b/jp/components/date_picker.md
index 700b030bc6..1b632aec39 100644
--- a/jp/components/date_picker.md
+++ b/jp/components/date_picker.md
@@ -22,7 +22,7 @@ _language: ja
 > Ignite UI for Angular コンポーネントをプロジェクトに追加する前に、すべての必要な依存関係を構成し、プロジェクトのセットアップが正しく完了したことを確認してください。「[**インストール**](https://jp.infragistics.com/products/ignite-ui-angular/getting-started#installation)」のトピックで手順を参照できます。
 
 ### 使用方法
-[`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) を使用してカレンダーから日付を選択できます。ピッカーは内部で [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) をカレンダーとして使用します。Ignite UI for Angular Date Picker を初期化する前に、[**IgxDatePickerModule**]({environment:angularApiUrl}/classes/igxdatepickermodule.html) を **app.module.ts** ファイルにインポートします。
+[`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) を使用してカレンダーから日付を選択できます。ピッカーは内部で [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) をカレンダーとして使用します。Ignite UI for Angular Date Picker を初期化する前に、`IgxDatePickerModule` を **app.module.ts** ファイルにインポートします。
 
 ```typescript
 // app.module.ts
@@ -170,8 +170,8 @@ The editable date picker provides the following outputs to handle entering of di
 
 | Output | Arguments | 説明 | 
 | ------------- |:-------------:|:-------------:|
-| [ | `IDatePickerDisabledDateEventArgs` | デートピッカーでユーザーが無効な日付を入力またはスピンした場合に発生します。 |
-| [`onValidationFailed`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#onvalidationfailed) | `IDatePickerValidationFailedEventArgs` | デートピッカーでユーザー無効なな日付を入力またはスピンした場合に発生します。 |
+|[`onDisabledDate`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#ondisableddate) | [`IDatePickerDisabledDateEventArgs`]({environment:angularApiUrl}/interfaces/idatepickerdisableddateeventargs.html) | デートピッカーでユーザーが無効な日付を入力またはスピンした場合に発生します。 |
+| [`onValidationFailed`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#onvalidationfailed) | [`IDatePickerValidationFailedEventArgs`]({environment:angularApiUrl}/interfaces/idatepickervalidationfailedeventargs.html) | デートピッカーでユーザー無効なな日付を入力またはスピンした場合に発生します。 |
 
 ##### キーボード ナビゲーション
 * デートピッカー ドロップダウンを開く: 
diff --git a/jp/components/icon.md b/jp/components/icon.md
index 6c41a7d4d7..4475a8cf41 100644
--- a/jp/components/icon.md
+++ b/jp/components/icon.md
@@ -23,7 +23,7 @@ _language: ja
 
 ### 依存関係
 
-Icon コンポーネントが `NgModule` としてエクスポートされるため、アプリケーションで `AppModule` への [`IgxIconModule`]({environment:angularApiUrl}/classes/igxiconmodule.html) のインポートのみが必要になります。
+Icon コンポーネントが `NgModule` としてエクスポートされるため、アプリケーションで `AppModule` への `IgxIconModule` のインポートのみが必要になります。
 
 ```typescript
 // app.module.ts
diff --git a/jp/components/label_input.md b/jp/components/label_input.md
index d27d4189ab..ec81c83acc 100644
--- a/jp/components/label_input.md
+++ b/jp/components/label_input.md
@@ -26,7 +26,7 @@ Label および Input ディレクティブのデフォルト スタイル設定
 > [!NOTE]
 > [`igxInput`]({environment:angularApiUrl}/classes/igxinputdirective.html) および `igxLabel` を使用するには、`<igx-input-group>` コンテナーにラップする必要があります。
 
-Ignite UI for Angular Label および Input を初期化する前に、[`IgxInputGroupModule`]({environment:angularApiUrl}/classes/igxinputgroupmodule.html) を **app.module.ts** ファイルにインポートします。
+Ignite UI for Angular Label および Input を初期化する前に、`IgxInputGroupModule` を **app.module.ts** ファイルにインポートします。
 
 ```typescript
 // app.module.ts
diff --git a/jp/components/mask.md b/jp/components/mask.md
index 77a51dd375..58c0d86829 100644
--- a/jp/components/mask.md
+++ b/jp/components/mask.md
@@ -23,7 +23,7 @@ _language: ja
 
 ### 使用方法
 
-[`igxMask`]({environment:angularApiUrl}/classes/igxmaskdirective.html) ディレクティブは **text** 型の入力に使用します。Ignite UI for Angular Mask ディレクティブを初期化する前に、[`IgxMaskModule`]({environment:angularApiUrl}/classes/igxmaskmodule.html) および [`IgxInputGroupModule`]({environment:angularApiUrl}/classes/igxinputgroupmodule.html) を **app.module.ts** ファイルにインポートします。**igxMask** ディレクティブを任意の Angular 入力コントロールと使用できます。
+[`igxMask`]({environment:angularApiUrl}/classes/igxmaskdirective.html) ディレクティブは **text** 型の入力に使用します。Ignite UI for Angular Mask ディレクティブを初期化する前に、[`IgxMaskModule`]({environment:angularApiUrl}/classes/igxmaskmodule.html) および `IgxInputGroupModule` を **app.module.ts** ファイルにインポートします。**igxMask** ディレクティブを任意の Angular 入力コントロールと使用できます。
 
 ```typescript
 // app.module.ts
@@ -218,7 +218,7 @@ export class Person {
 ```
 
 #### focus と blur に追加の書式を適用
-デフォルトの mask 動作に加え、カスタムパイプを実装して [`focusedValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#focusedValuePipe) や [`displayValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#displayValuePipe) 入力プロパティで入力がフォーカスを get または lost した場合に値を必要なアウトプットへ変換できます。基になるモデル値に影響はありません。以下はその方法です。
+デフォルトの mask 動作に加え、カスタムパイプを実装して [`focusedValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#focusedvaluepipe) や [`displayValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#displayvaluepipe) 入力プロパティで入力がフォーカスを get または lost した場合に値を必要なアウトプットへ変換できます。基になるモデル値に影響はありません。以下はその方法です。
 
  表示値の最後に '%' サインを追加または削除する 2 つのパイプを実装します。
 ```typescript
@@ -245,7 +245,7 @@ export class InputFormatPipe implements PipeTransform {
 }
 ```
 
-[`focusedValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#focusedValuePipe) や [`displayValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#displayValuePipe) 入力プロパティに各パイプのインスタンスを渡します。
+[`focusedValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#focusedvaluepipe) や [`displayValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#displayvaluepipe) 入力プロパティに各パイプのインスタンスを渡します。
 
 ```typescript
 value = 1230;
diff --git a/jp/components/month_picker.md b/jp/components/month_picker.md
index ee78798b40..b6e2a7efde 100644
--- a/jp/components/month_picker.md
+++ b/jp/components/month_picker.md
@@ -19,7 +19,7 @@ _keywords: Ignite UI for Angular, UI コントロール, Angular ウィジェッ
 > Ignite UI for Angular コンポーネント、をプロジェクトに追加する前に、必要なすべての依存関係を構成し、プロジェクトのセットアップが正しく完了したことを確認してください。[**インストール**](https://jp.infragistics.com/products/ignite-ui-angular/getting-started#installation)のトピックで手順を確認できます。
 
 ### 使用方法
-**Ignite UI for Angular Month Picker** を初期化する前に、[**IgxCalendarModule**]({environment:angularApiUrl}/classes/igxcalendarmodule.html) をアプリケーションの AppModule (**app.module.ts** ファイル) にインポートします。注: [**IgxCalendar**]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) に [**IgxCalendar**]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) の依存関係があるため、AppModule にも追加する必要があります。
+**Ignite UI for Angular Month Picker** を初期化する前に、`IgxCalendarModule` をアプリケーションの AppModule (**app.module.ts** ファイル) にインポートします。注: [**IgxCalendar**]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) に [**IgxCalendar**]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) の依存関係があるため、AppModule にも追加する必要があります。
 
 ```typescript
 // app.module.ts
@@ -56,7 +56,7 @@ import { IgxMonthPickerComponent } from "igniteui-angular";
 ```
 
 #### 日付の設定
-[`IgxMonthPickerComponent`]({environment:angularApiUrl}/classes/igxmonthpickercomponent.html) に日付を設定するには、[`value`]({environment:angularApiUrl}/classes/igxmonthpickercomponent.html#value) 入力を設定します。
+[`IgxMonthPickerComponent`]({environment:angularApiUrl}/classes/igxmonthpickercomponent.html) に日付を設定するには、[`value`]({environment:angularApiUrl}/classes/igxcalendarbase.html#value) 入力を設定します。
 
 ```typescript
 // month-picker-sample.component.ts
@@ -79,7 +79,7 @@ Two-way データ バインディングを作成するには、以下のよう
 ```
 
 #### 書式設定
-`formatViews` と `formatOptions` 入力を使用してマンスピッカーの表示形式を変更します。
+`formatViews` と [`formatOptions`]({environment:angularApiUrl}/classes/igxcalendarbase.html#formatoptions) 入力を使用してマンスピッカーの表示形式を変更します。
 
 ```html
 <!-- month-picker-sample.component.html -->
@@ -106,7 +106,7 @@ public numericFormatOptions = {
 </div>
 
 #### ローカライズ
-`locale` 入力を使用してマンスピッカーのローカライズをカスタマイズします。
+[`locale`]({environment:angularApiUrl}/classes/igxcalendarbase.html#locale) 入力を使用してマンスピッカーのローカライズをカスタマイズします。
 
 ```html
 <!-- month-picker-sample.component.html -->
diff --git a/jp/components/radio_button.md b/jp/components/radio_button.md
index 4e47526525..ebb263a064 100644
--- a/jp/components/radio_button.md
+++ b/jp/components/radio_button.md
@@ -26,7 +26,7 @@ _language: ja
 
 ラジオ ボタン コンポーネントはオプションの単一選択を可能にします。デフォルト スタイル設定はマテリアル デザイン ガイドラインの選択コントロールの仕様に基づきます。
 
-Ignite UI for Angular Radio を初期化する前に [`IgxRadioModule`]({environment:angularApiUrl}/classes/igxradiomodule.html) を **app.module.ts** ファイルにインポートします。
+Ignite UI for Angular Radio を初期化する前に `IgxRadioModule` を **app.module.ts** ファイルにインポートします。
 
 ```typescript
 // app.module.ts
@@ -120,7 +120,7 @@ public selectedColor: string = this.colors[3].hex;
 
 #### Radio Group の使用
 
-Radio Group ディレクティブが NgModule としてエクスポートされるため、アプリケーションで **app.module.ts** ファイルの [`IgxRadioModule`]({environment:angularApiUrl}/classes/igxradiomodule.html) をインポートする必要があります。
+Radio Group ディレクティブが NgModule としてエクスポートされるため、アプリケーションで **app.module.ts** ファイルの `IgxRadioModule` をインポートする必要があります。
 
 ```typescript
 // app.module.ts
diff --git a/jp/components/ripple.md b/jp/components/ripple.md
index 0ca7681b98..66069a5355 100644
--- a/jp/components/ripple.md
+++ b/jp/components/ripple.md
@@ -22,7 +22,7 @@ _language: ja
 
 ### 依存関係
 
-Ripple ディレクティブが `NgModule` としてエクスポートされるため、アプリケーションで `AppModule` に [`IgxRippleModule`]({environment:angularApiUrl}/classes/igxripplemodule.html) をインポートする必要があります。
+Ripple ディレクティブが `NgModule` としてエクスポートされるため、アプリケーションで `AppModule` に `IgxRippleModule` をインポートする必要があります。
 
 ```typescript
 // app.module.ts
diff --git a/jp/components/switch.md b/jp/components/switch.md
index c7f4e818c9..fa565f1065 100644
--- a/jp/components/switch.md
+++ b/jp/components/switch.md
@@ -24,7 +24,7 @@ _language: ja
 
 中核となるスイッチ コンポーネントはオン/オフ状態の切り替えが可能です。デフォルト スタイル設定はマテリアル デザイン ガイドラインの選択コントロールの仕様に基づきます。
 
-Ignite UI for Angular Switch を初期化する前に、[`IgxSwitchModule`]({environment:angularApiUrl}/classes/igxswitchmodule.html) を **app.module.ts** ファイルにインポートします。
+Ignite UI for Angular Switch を初期化する前に、`IgxSwitchModule` を **app.module.ts** ファイルにインポートします。
 
 ```typescript
 // app.module.ts
diff --git a/jp/components/tabbar.md b/jp/components/tabbar.md
index ad3a9e95b8..75e44818d5 100644
--- a/jp/components/tabbar.md
+++ b/jp/components/tabbar.md
@@ -11,7 +11,7 @@ _language: ja
 <div class="divider"></div>
 
 > [!NOTE]
-> `igx-tab-bar` セレクターは非推奨です。代わりに [`igx-bottom-nav`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html) を使用してください。`IgxTabBarComponent` クラスは [`IgxBottomNavComponent`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html) に名前変更しました。`IgxTabBarModule` は [`IgxBottomNavModule`]({environment:angularApiUrl}/classes/igxbottomnavmodule.html) に名前変更しました。
+> `igx-tab-bar` セレクターは非推奨です。代わりに [`igx-bottom-nav`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html) を使用してください。`IgxTabBarComponent` クラスは [`IgxBottomNavComponent`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html) に名前変更しました。`IgxTabBarModule` は `IgxBottomNavModule` に名前変更しました。
 
 ### Bottom Navigation デモ
 
@@ -28,7 +28,7 @@ _language: ja
 
 #### 使用方法
 
-コントロールを初期化する前に、[`IgxBottomNavModule`]({environment:angularApiUrl}/classes/igxbottomnavmodule.html) を **app.module.ts** ファイルにインポートします。
+コントロールを初期化する前に、`IgxBottomNavModule` を **app.module.ts** ファイルにインポートします。
 
 ```typescript
 // app.module.ts
diff --git a/jp/components/tabs.md b/jp/components/tabs.md
index fe334515ec..a1b24a53df 100644
--- a/jp/components/tabs.md
+++ b/jp/components/tabs.md
@@ -23,7 +23,7 @@ Ignite UI for Angular [`igx-tabs`]({environment:angularApiUrl}/classes/igxtabsco
 
 ### 使用方法
 
-Ignite UI for Angular Tabs コンポーネントを初期化する前に [`IgxTabsModule`]({environment:angularApiUrl}/classes/igxtabsmodule.html) を **app.module.ts** ファイルにインポートします。
+Ignite UI for Angular Tabs コンポーネントを初期化する前に `IgxTabsModule` を **app.module.ts** ファイルにインポートします。
 
 ```typescript
 // app.module.ts
diff --git a/jp/components/time_picker.md b/jp/components/time_picker.md
index 0abcded177..8f2c1ae3c4 100644
--- a/jp/components/time_picker.md
+++ b/jp/components/time_picker.md
@@ -20,7 +20,7 @@ _language: ja
 
 ### 使用方法
 
-Ignite UI for Angular Time Picker を初期化する前に、[`IgxTimePickerModule`]({environment:angularApiUrl}/classes/igxtimepickermodule.html) を **app.module.ts** ファイルにインポートします。注: IgxTimePicker に **BrowserAnimationsModule** の依存関係があるため、AppModule にも追加する必要があります。
+Ignite UI for Angular Time Picker を初期化する前に、`IgxTimePickerModule` を **app.module.ts** ファイルにインポートします。注: IgxTimePicker に **BrowserAnimationsModule** の依存関係があるため、AppModule にも追加する必要があります。
 
 ```typescript
 // app.module.ts
diff --git a/kr/components/avatar.md b/kr/components/avatar.md
index 86100aab49..7947dacfbd 100644
--- a/kr/components/avatar.md
+++ b/kr/components/avatar.md
@@ -23,7 +23,7 @@ _language: kr
 
 ### Usage
 
-To get started with the Ignite UI for Angular Avatar, let's first import the [`IgxAvatarModule`]({environment:angularApiUrl}/classes/igxavatarmodule.html) in the **app.module.ts** file:
+To get started with the Ignite UI for Angular Avatar, let's first import the `IgxAvatarModule` in the **app.module.ts** file:
 
 ```typescript
 // app.module.ts
diff --git a/kr/components/badge.md b/kr/components/badge.md
index 01612d40cc..07f48c5a99 100644
--- a/kr/components/badge.md
+++ b/kr/components/badge.md
@@ -22,7 +22,7 @@ _language: kr
 > To start using Ignite UI for Angular components in your own projects, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this in the [**installation**](https://www.infragistics.com/products/ignite-ui-angular/getting-started#installation) topic.
 
 ###Usage
-To get started with the Ignite UI for Angular Badge, let's first import the [`IgxBadgeModule`]({environment:angularApiUrl}/classes/igxbadgemodule.html) in the **app.module.ts** file:
+To get started with the Ignite UI for Angular Badge, let's first import the `IgxBadgeModule` in the **app.module.ts** file:
 
 ```typescript
 // app.module.ts
diff --git a/kr/components/button.md b/kr/components/button.md
index d5831a9a79..9f86b650c6 100644
--- a/kr/components/button.md
+++ b/kr/components/button.md
@@ -21,7 +21,7 @@ The Button directive within Ignite UI for Angular is intended to be used on any
 
 ### Dependencies
 
-The Button Directive is exported as an `NgModule`, thus all you need to do in your application is to import the [`IgxButtonModule`]({environment:angularApiUrl}/classes/igxbuttonmodule.html) inside your `AppModule`:
+The Button Directive is exported as an `NgModule`, thus all you need to do in your application is to import the `IgxButtonModule` inside your `AppModule`:
 
 ```typescript
 // app.module.ts
diff --git a/kr/components/buttonGroup.md b/kr/components/buttonGroup.md
index 132e2ee44f..ad90694916 100644
--- a/kr/components/buttonGroup.md
+++ b/kr/components/buttonGroup.md
@@ -21,7 +21,7 @@ The [**igx-buttongroup**]({environment:angularApiUrl}/classes/igxbuttongroupcomp
 
 ### Dependencies
 
-The Button Group is exported as an `NgModule`, thus you will need to import the [`IgxButtonGroupModule`]({environment:angularApiUrl}/classes/igxbuttongroupmodule.html) inside your `AppModule`:
+The Button Group is exported as an `NgModule`, thus you will need to import the `IgxButtonGroupModule` inside your `AppModule`:
 
 ```typescript
 // app.module.ts
diff --git a/kr/components/calendar.md b/kr/components/calendar.md
index 80e0a30883..ab46af0d30 100644
--- a/kr/components/calendar.md
+++ b/kr/components/calendar.md
@@ -17,7 +17,7 @@ _language: kr
 </div>
 
 ### Usage
-To get started with the **Ignite UI for Angular Calendar**, let's first import the [**IgxCalendarModule**]({environment:angularApiUrl}/classes/igxcalendarmodule.html) in the application's AppModule, typically this is the **app.module.ts** file. Note that the [**IgxCalendar**]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) is also dependent on the **BrowserAnimationsModule**, so it needs to be added to the AppModule as well:
+To get started with the **Ignite UI for Angular Calendar**, let's first import the `IgxCalendarModule` in the application's AppModule, typically this is the **app.module.ts** file. Note that the [**IgxCalendar**]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) is also dependent on the **BrowserAnimationsModule**, so it needs to be added to the AppModule as well:
 
 ```typescript
 // app.module.ts
@@ -45,7 +45,7 @@ import { IgxCalendarComponent } from 'igniteui-angular';
 > Consider using the [appropriate polyfills](https://github.com/andyearnshaw/Intl.js/) if your target platform does not support them.
 
 ### Selection
-Instantiating the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) is as easy as placing its selector element in the template. This will display the current month in the calendar and use single selection mode. We switch to any of the other selection modes - `multi` and `range`, by setting the [`selection`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#selection) property:
+Instantiating the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) is as easy as placing its selector element in the template. This will display the current month in the calendar and use single selection mode. We switch to any of the other selection modes - `multi` and `range`, by setting the [`selection`]({environment:angularApiUrl}/classes/igxcalendarbase.html#selection) property:
 ```html
 <!-- app.component.html -->
 <!-- Single selection mode -->
@@ -67,9 +67,9 @@ Notice that the calendar header is not rendered when the selection is either `mu
 
 Due to their very nature, localization and formatting are essential to any calendar. In the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) those are controlled and customized through the following properties - [`locale`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#locale), [`formatOptions`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#formatoptions), [`formatViews`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#formatviews).
 <br>
-Let's go ahead and try those along with other customizations from the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) API. Say we are having visitors on our page coming from countries from EFTA (European Free Trade Association) countries, so we need to display the calendar in the corresponding culture. First thing we need to set is the [`weekstart`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#weekstart), which controls the starting day of the week. It defaults to 0, which corresponds to Sunday, so we set a value of 1.
+Let's go ahead and try those along with other customizations from the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) API. Say we are having visitors on our page coming from countries from EFTA (European Free Trade Association) countries, so we need to display the calendar in the corresponding culture. First thing we need to set is the [`weekstart`]({environment:angularApiUrl}/classes/igxcalendarbase.html#weekstart), which controls the starting day of the week. It defaults to 0, which corresponds to Sunday, so we set a value of 1.
 
-In the markup below we are also binding the [`formatOptions`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#formatoptions) and [`formatViews`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#formatviews) properties to customize the display formatting. Finally we are binding the [`locale`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#locale) property to a value, based on the user's location choice:
+In the markup below we are also binding the [`formatOptions`]({environment:angularApiUrl}/classes/igxcalendarbase.html#formatoptions) and [`formatViews`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#formatviews) properties to customize the display formatting. Finally we are binding the [`locale`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#locale) property to a value, based on the user's location choice:
 
 ```html
 <!-- app.component.html -->
@@ -115,7 +115,7 @@ Great, we should now have a calendar with customized dates display that also cha
 </div>
 
 ### Events
-Let's build on top of that sample a bit. We will require the user to enter a date range that does not exceed 5 days. We need to change the [`selection`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#selection) mode of the calendar to "range" and prompt the user to correct the selection, if the range is not valid. To do this we will use the [`onSelection`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#onselection) event:
+Let's build on top of that sample a bit. We will require the user to enter a date range that does not exceed 5 days. We need to change the [`selection`]({environment:angularApiUrl}/classes/igxcalendarbase.html#selection) mode of the calendar to "range" and prompt the user to correct the selection, if the range is not valid. To do this we will use the [`onSelection`]({environment:angularApiUrl}/classes/igxcalendarbase.html#onselection) event:
 
 ```html
 <!-- app.component.html -->
@@ -126,7 +126,7 @@ Let's build on top of that sample a bit. We will require the user to enter a dat
 </igx-calendar>
 ```
 
-The value passed in the [`onSelection`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#onselection) event is the collection of dates selected, so we can read its length to base our logic upon it. If we alert the user for the invalid selection, we also reset the selection to contain only the first date from the range using the [`selectDate`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#selectdate) method:
+The value passed in the [`onSelection`]({environment:angularApiUrl}/classes/igxcalendarbase.html#onselection) event is the collection of dates selected, so we can read its length to base our logic upon it. If we alert the user for the invalid selection, we also reset the selection to contain only the first date from the range using the [`selectDate`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#selectdate) method:
 
 ```typescript
 // app.component.ts
@@ -230,7 +230,7 @@ Having implemented this conditional templating and date parsing we should get co
 </div>
 
 ### Disabled dates
-This section demonstrates the usage of [`disabledDates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#disableddates) functionallity. Different `single dates` or `range` elements could be added to Array, and passed to the [`disabledDates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#disableddates) descriptor.
+This section demonstrates the usage of [`disabledDates`]({environment:angularApiUrl}/classes/igxcalendarbase.html#disableddates) functionallity. Different `single dates` or `range` elements could be added to Array, and passed to the [`disabledDates`]({environment:angularApiUrl}/classes/igxcalendarbase.html#disableddates) descriptor.
 
 ```typescript
 this.calendar.disabledDates = [{ type: DateRangeType.Between, dateRange: [
@@ -274,9 +274,9 @@ This is the result.
 
 ### Special dates
 
-[`Special dates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#specialdates) feature is using almost the same configuration principles as [`Disabled dates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#disableddates). The difference here is dates `styling` and `interaction`. You are able to select and focus [`Special dates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#specialdates).
+[`Special dates`]({environment:angularApiUrl}/classes/igxcalendarbase.html#specialdates) feature is using almost the same configuration principles as [`Disabled dates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#disableddates). The difference here is dates `styling` and `interaction`. You are able to select and focus [`Special dates`]({environment:angularApiUrl}/classes/igxcalendarbase.html#specialdates).
 
-Lets add a [`Special dates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#specialdates) to our [`igxCalendar`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html), we are going to create a [`DateRangeDescriptor`]({environment:angularApiUrl}/interfaces/daterangedescriptor.html) item of type [`DateRangeType.Specific`]({environment:angularApiUrl}/enums/daterangetype.html#specific) and pass array of dates as [`dateRange`]({environment:angularApiUrl}/interfaces/daterangedescriptor.html#daterange):
+Lets add a [`Special dates`]({environment:angularApiUrl}/classes/igxcalendarbase.html#specialdates) to our [`igxCalendar`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html), we are going to create a [`DateRangeDescriptor`]({environment:angularApiUrl}/interfaces/daterangedescriptor.html) item of type [`DateRangeType.Specific`]({environment:angularApiUrl}/enums/daterangetype.html#specific) and pass array of dates as [`dateRange`]({environment:angularApiUrl}/interfaces/daterangedescriptor.html#daterange):
 
 ```typescript
 export class CalendarSample7Component {
diff --git a/kr/components/checkbox.md b/kr/components/checkbox.md
index 0494efd64f..fb8bedaeb8 100644
--- a/kr/components/checkbox.md
+++ b/kr/components/checkbox.md
@@ -21,7 +21,7 @@ _language: kr
 ### Usage
 At its core, the checkbox component allows for a choice between selected/unselected state. The default styling is done according to the selection controls specification as per the Material Design guidelines.
 
-To get started with the Ignite UI for Angular Checkbox import the [`IgxCheckboxModule`]({environment:angularApiUrl}/classes/igxcheckboxmodule.html) in the **app.module.ts** file:
+To get started with the Ignite UI for Angular Checkbox import the `IgxCheckboxModule` in the **app.module.ts** file:
 
 ```typescript
 // app.module.ts
diff --git a/kr/components/date_picker.md b/kr/components/date_picker.md
index 6fb78e507a..e8f40727c1 100644
--- a/kr/components/date_picker.md
+++ b/kr/components/date_picker.md
@@ -22,7 +22,7 @@ _language: kr
 > To start using Ignite UI for Angular components in your own projects, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this in the [**installation**](https://www.infragistics.com/products/ignite-ui-angular/getting-started#installation) topic.
 
 ### Usage
-By default, the [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) allows you to pick a date from a calendar. The picker uses the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) internally as a calendar. To get started with the Ignite UI for Angular Date Picker, let's first import the [**IgxDatePickerModule**]({environment:angularApiUrl}/classes/igxdatepickermodule.html) in our **app.module.ts** file:
+By default, the [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) allows you to pick a date from a calendar. The picker uses the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) internally as a calendar. To get started with the Ignite UI for Angular Date Picker, let's first import the `IgxDatePickerModule` in our **app.module.ts** file:
 
 ```typescript
 // app.module.ts
@@ -167,8 +167,8 @@ The editable date picker provides the following outputs to handle entering of di
 
 | Output | Arguments | Description | 
 | ------------- |:-------------:|:-------------:|
-| [`onDisabledDate`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#ondisableddate) | `IDatePickerDisabledDateEventArgs` | Fires when the user types/spins a disabled date in the date picker editor. |
-| [`onValidationFailed`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#onvalidationfailed) | `IDatePickerValidationFailedEventArgs` | Fires when the user types/spins invalid date in the date picker editor. |
+| [`onDisabledDate`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#ondisableddate) | [`IDatePickerDisabledDateEventArgs`]({environment:angularApiUrl}/interfaces/idatepickerdisableddateeventargs.html) | Fires when the user types/spins a disabled date in the date picker editor. |
+| [`onValidationFailed`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#onvalidationfailed) | [`IDatePickerValidationFailedEventArgs`]({environment:angularApiUrl}/interfaces/idatepickervalidationfailedeventargs.html) | Fires when the user types/spins invalid date in the date picker editor. |
 
 ##### Keyboard Navigation
 * To open the date picker drop down: 
diff --git a/kr/components/icon.md b/kr/components/icon.md
index 77bcec1891..8ad6af6796 100644
--- a/kr/components/icon.md
+++ b/kr/components/icon.md
@@ -23,7 +23,7 @@ _language: kr
 
 ### Dependencies
 
-The Icon component is exported as an `NgModule`, thus all you need to do in your application is to import the [`IgxIconModule`]({environment:angularApiUrl}/classes/igxiconmodule.html) inside your `AppModule`:
+The Icon component is exported as an `NgModule`, thus all you need to do in your application is to import the `IgxIconModule` inside your `AppModule`:
 
 ```typescript
 // app.module.ts
diff --git a/kr/components/label_input.md b/kr/components/label_input.md
index 2e4c1f5984..2e10b99468 100644
--- a/kr/components/label_input.md
+++ b/kr/components/label_input.md
@@ -27,7 +27,7 @@ The default styling of the Label and Input directives follows the text fields sp
 > [!NOTE]
 > To use [`igxInput`]({environment:angularApiUrl}/classes/igxinputdirective.html) and `igxLabel`, you have to wrap them in an `<igx-input-group>` container.
 
-To get started with the Ignite UI for Angular Label & Input, let's first import the [`IgxInputGroupModule`]({environment:angularApiUrl}/classes/igxinputgroupmodule.html) in our **app.module.ts** file:
+To get started with the Ignite UI for Angular Label & Input, let's first import the `IgxInputGroupModule` in our **app.module.ts** file:
 
 ```typescript
 // app.module.ts
diff --git a/kr/components/mask.md b/kr/components/mask.md
index f636833684..aea4e71d2a 100644
--- a/kr/components/mask.md
+++ b/kr/components/mask.md
@@ -23,7 +23,7 @@ By applying [`igxMask`]({environment:angularApiUrl}/classes/igxmaskdirective.htm
 
 ### Usage
 [`igxMask`]({environment:angularApiUrl}/classes/igxmaskdirective.html) directive is used on an input of type **text**.
-To get started with the Ignite UI for Angular Mask directive, let's first import the [`IgxMaskModule`]({environment:angularApiUrl}/classes/igxmaskmodule.html) and [`IgxInputGroupModule`]({environment:angularApiUrl}/classes/igxinputgroupmodule.html) in our **app.module.ts** file.
+To get started with the Ignite UI for Angular Mask directive, let's first import the `IgxMaskModule` and [`IgxInputGroupModule`]({environment:angularApiUrl}/classes/igxinputgroupmodule.html) in our **app.module.ts** file.
 
 ```typescript
 // app.module.ts
@@ -214,7 +214,7 @@ export class Person {
 ```
 
 #### Apply additional formatting on focus and blur
-In addition to the default mask behavior, the user can implement his own custom pipes and take advantage of the [`focusedValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#focusedValuePipe) and [`displayValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#displayValuePipe) input properties, to transform the value to a desired output when the input gets or loses focus. This will not affect the underlying model value. Let's demonstrate how this can be achieved!
+In addition to the default mask behavior, the user can implement his own custom pipes and take advantage of the [`focusedValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#focusedvaluepipe) and [`displayValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#displayvaluepipe) input properties, to transform the value to a desired output when the input gets or loses focus. This will not affect the underlying model value. Let's demonstrate how this can be achieved!
 
 Implement two pipes that will append/remove a '%' sign at the end of the displayed value:
 ```typescript
@@ -241,7 +241,7 @@ export class InputFormatPipe implements PipeTransform {
 }
 ```
 
-Pass an instance of each pipe to the [`focusedValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#focusedValuePipe) and [`displayValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#displayValuePipe) input properties as follows:
+Pass an instance of each pipe to the [`focusedValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#focusedvaluepipe) and [`displayValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#displayvaluepipe) input properties as follows:
 
 ```typescript
 value = 1230;
diff --git a/kr/components/month_picker.md b/kr/components/month_picker.md
index 1669b0c5f8..babc6da920 100644
--- a/kr/components/month_picker.md
+++ b/kr/components/month_picker.md
@@ -19,7 +19,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
 > To start using Ignite UI for Angular components in your own projects, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this in the [**installation**](https://www.infragistics.com/products/ignite-ui-angular/getting-started#installation) topic.
 
 ### Usage
-To get started with the **Ignite UI for Angular Month Picker**, let's first import the [**IgxCalendarModule**]({environment:angularApiUrl}/classes/igxcalendarmodule.html) in the application's AppModule, typically this is the **app.module.ts** file. Note that the [**IgxCalendar**]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) is also dependent on the **BrowserAnimationsModule**, so it needs to be added to the AppModule as well:
+To get started with the **Ignite UI for Angular Month Picker**, let's first import the `IgxCalendarModule` in the application's AppModule, typically this is the **app.module.ts** file. Note that the [**IgxCalendar**]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) is also dependent on the **BrowserAnimationsModule**, so it needs to be added to the AppModule as well:
 
 ```typescript
 // app.module.ts
@@ -56,7 +56,7 @@ To add a month picker in a template, use the following code:
 ```
 
 #### Setting date
-Set a date to [`IgxMonthPickerComponent`]({environment:angularApiUrl}/classes/igxmonthpickercomponent.html) using the [`value`]({environment:angularApiUrl}/classes/igxmonthpickercomponent.html#value) input.
+Set a date to [`IgxMonthPickerComponent`]({environment:angularApiUrl}/classes/igxmonthpickercomponent.html) using the [`value`]({environment:angularApiUrl}/classes/igxcalendarbase.html#value) input.
 
 ```typescript
 // month-picker-sample.component.ts
@@ -79,7 +79,7 @@ To create a two-way data-binding, set `ngModel` like this:
 ```
 
 #### Formatting
-Change the month picker display format, using the `formatViews` and `formatOptions` inputs.
+Change the month picker display format, using the [`formatOptions`]({environment:angularApiUrl}/classes/igxcalendarbase.html#formatoptions) inputs.
 
 ```html
 <!-- month-picker-sample.component.html -->
@@ -106,7 +106,7 @@ Here is an example of modifying the default format options of the month picker:
 </div>
 
 #### Localization
-Use the `locale` input, to customize the month picker localization.
+Use the [`locale`]({environment:angularApiUrl}/classes/igxcalendarbase.html#locale) input, to customize the month picker localization.
 
 ```html
 <!-- month-picker-sample.component.html -->
diff --git a/kr/components/radio_button.md b/kr/components/radio_button.md
index 9b744ff7ec..71609029e4 100644
--- a/kr/components/radio_button.md
+++ b/kr/components/radio_button.md
@@ -23,7 +23,7 @@ _language: kr
 #### Radio Button Usage
 
 At its core the radio button component allows for a single option selection. The default styling is done according to the selection controls specification as per the Material Design guidelines.
-To get started with the Ignite UI for Angular Radio, let's first import the [`IgxRadioModule`]({environment:angularApiUrl}/classes/igxradiomodule.html) in the **app.module.ts** file:
+To get started with the Ignite UI for Angular Radio, let's first import the `IgxRadioModule` in the **app.module.ts** file:
 
 ```typescript
 // app.module.ts
@@ -114,7 +114,7 @@ Try it! The final result would be something like that:
 
 #### Radio Group Usage
 
-The Radio Group Directive is exported as an `NgModule`, thus all you need to do in your application is to import the [`IgxRadioModule`]({environment:angularApiUrl}/classes/igxradiomodule.html) in the **app.module.ts** file:
+The Radio Group Directive is exported as an `NgModule`, thus all you need to do in your application is to import the `IgxRadioModule` in the **app.module.ts** file:
 
 ```typescript
 // app.module.ts
diff --git a/kr/components/ripple.md b/kr/components/ripple.md
index cad0133405..f117e05c6e 100644
--- a/kr/components/ripple.md
+++ b/kr/components/ripple.md
@@ -20,7 +20,7 @@ _language: kr
 
 ### Dependencies
 
-The Ripple Directive is exported as an `NgModule`, thus all you need to do in your application is to import the [`IgxRippleModule`]({environment:angularApiUrl}/classes/igxripplemodule.html) inside your `AppModule`:
+The Ripple Directive is exported as an `NgModule`, thus all you need to do in your application is to import the `IgxRippleModule` inside your `AppModule`:
 
 ```typescript
 // app.module.ts
diff --git a/kr/components/switch.md b/kr/components/switch.md
index e0e59da751..ead1367c66 100644
--- a/kr/components/switch.md
+++ b/kr/components/switch.md
@@ -21,7 +21,7 @@ _language: kr
 ### Usage
 
 At its core the switch component allows for toggling between on/off state. The default styling is done according to the selection controls specification as per the Material Design guidelines.
-To get started with the Ignite UI for Angular Switch, let's first import the [`IgxSwitchModule`]({environment:angularApiUrl}/classes/igxswitchmodule.html) in the **app.module.ts** file:
+To get started with the Ignite UI for Angular Switch, let's first import the `IgxSwitchModule` in the **app.module.ts** file:
 
 ```typescript
 // app.module.ts
diff --git a/kr/components/tabbar.md b/kr/components/tabbar.md
index 3b6fd51993..f1d97e7d10 100644
--- a/kr/components/tabbar.md
+++ b/kr/components/tabbar.md
@@ -11,7 +11,7 @@ _language: kr
 <div class="divider"></div>
 
 > [!NOTE]
-> `igx-tab-bar` selector is deprecated. You could use [`igx-bottom-nav`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html) instead. `IgxTabBarComponent` class is renamed to [`IgxBottomNavComponent`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html). `IgxTabBarModule` is renamed to [`IgxBottomNavModule`]({environment:angularApiUrl}/classes/igxbottomnavmodule.html).
+> `igx-tab-bar` selector is deprecated. You could use [`igx-bottom-nav`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html) instead. `IgxTabBarComponent` class is renamed to [`IgxBottomNavComponent`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html). `IgxTabBarModule` is renamed to `IgxBottomNavModule`.
 
 ### Bottom Navigation Demo
 
@@ -28,7 +28,7 @@ _language: kr
 
 ### Usage
 
-To get started with the control, let's first import the [`IgxBottomNavModule`]({environment:angularApiUrl}/classes/igxbottomnavmodule.html) in the **app.module.ts** file:
+To get started with the control, let's first import the `IgxBottomNavModule` in the **app.module.ts** file:
 
 ```typescript
 // app.module.ts
diff --git a/kr/components/tabs.md b/kr/components/tabs.md
index ddcf4f800f..34046d8949 100644
--- a/kr/components/tabs.md
+++ b/kr/components/tabs.md
@@ -23,7 +23,7 @@ The [`igx-tabs`]({environment:angularApiUrl}/classes/igxtabscomponent.html) comp
 
 ### Usage
 
-To get started with the Ignite UI for Angular Tabs component, let's first import the [`IgxTabsModule`]({environment:angularApiUrl}/classes/igxtabsmodule.html) in the **app.module.ts** file.
+To get started with the Ignite UI for Angular Tabs component, let's first import the `IgxTabsModule` in the **app.module.ts** file.
 
 ```typescript
 // app.module.ts
diff --git a/kr/components/time_picker.md b/kr/components/time_picker.md
index 534dacabfa..7be5a5b4a1 100644
--- a/kr/components/time_picker.md
+++ b/kr/components/time_picker.md
@@ -19,7 +19,7 @@ _language: kr---
 
 ### Usage
 
-To get started with the Ignite UI for Angular Time Picker, let's first import the [`IgxTimePickerModule`]({environment:angularApiUrl}/classes/igxtimepickermodule.html) in the **app.module.ts** file. Note that the IgxTimePicker is also dependent on the **BrowserAnimationsModule**, so it needs to be added to the AppModule as well:
+To get started with the Ignite UI for Angular Time Picker, let's first import the `IgxTimePickerModule` in the **app.module.ts** file. Note that the IgxTimePicker is also dependent on the **BrowserAnimationsModule**, so it needs to be added to the AppModule as well:
 
 ```typescript
 // app.module.ts
@@ -154,7 +154,7 @@ And there we have it:
 
 #### Dropdown mode
 
-When you add the time picker to your project, its default mode is read-only dialog mode. To change the time picker mode to editable dropdown mode, set the [`mode`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#mode) input to `dropdown`:
+When you add the time picker to your project, its default mode is read-only dialog mode. To change the time picker mode to editable dropdown mode, set the [`mode`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#mode) input to [`dropdown`]({environment:angularApiUrl}/enums/interactionmode.html#dropdown):
 
 ```typescript
 // timePickerDropdown.component.ts