Fix stale Angular API links for renamed events and progress components (#362)

Author: viktorkombov

docs/angular/src/content/en/components/circular-progress.mdx

@@ -86,22 +86,22 @@ To have a better understanding how everything works, let's create a simple examp
 After that, we should have the demo sample in your browser.
 
 <DocsAside type="info">
-The **igx-circular-bar** emits <ApiLink type="ProgressBarGradientDirective" member="onProgressChanged" label="onProgressChanged" /> event that outputs an object like this `{currentValue: 65, previousValue: 64}` on each step.
+The **igx-circular-bar** emits <ApiLink type="CircularProgressBar" member="progressChanged" label="progressChanged" /> event that outputs an object like this `{currentValue: 65, previousValue: 64}` on each step.
 </DocsAside>
 <DocsAside type="info">
-The default progress increments by **1% of the <ApiLink type="ProgressBarGradientDirective" member="max" label="max" /> value** per update cycle, this happens if the <ApiLink type="ProgressBarGradientDirective" member="step" label="step" /> value is not defined. To change the update rate, the <ApiLink type="ProgressBarGradientDirective" member="step" label="step" /> value should be defined.```
+The default progress increments by **1% of the <ApiLink type="CircularProgressBar" member="max" label="max" /> value** per update cycle, this happens if the <ApiLink type="CircularProgressBar" member="step" label="step" /> value is not defined. To change the update rate, the <ApiLink type="CircularProgressBar" member="step" label="step" /> value should be defined.
 </DocsAside>
 
 ### Indeterminate Progress
 
-If you want to track a process that is not determined precisely, you can set the <ApiLink type="ProgressBarGradientDirective" member="indeterminate" label="indeterminate" /> input property to `true`.
+If you want to track a process that is not determined precisely, you can set the <ApiLink type="CircularProgressBar" member="indeterminate" label="indeterminate" /> input property to `true`.
 
 ```html
 <igx-circular-bar [animate]="false" [indeterminate]="true" [textVisibility]="false"></igx-circular-bar>
 ```
 
 <DocsAside type="info">
-You can hide the text of the circular progress bar by setting the <ApiLink type="ProgressBarGradientDirective" member="textVisibility" label="textVisibility" /> property to `false`.
+You can hide the text of the circular progress bar by setting the <ApiLink type="CircularProgressBar" member="textVisibility" label="textVisibility" /> property to `false`.
 </DocsAside>
 
 The final result should be:
@@ -185,7 +185,7 @@ Add some styles:
 ### Gradient Progress
 
 One way to customize the progress bar is by using a color gradient instead of a solid color.
-This can be done in one of two ways - by using the <ApiLink type="ProgressBarGradientDirective" member="gradienttemplate" label="IgxProgressBarGradientDirective" /> directive or by implementing a custom theme, which supports up to two color stops.
+This can be done in one of two ways - by using the <ApiLink type="CircularProgressBar" member="gradientTemplate" label="IgxProgressBarGradientDirective" /> directive or by implementing a custom theme, which supports up to two color stops.
 
 To create a gradient with just two color stops using a custom theme, you need to create a list of colors and pass it to the `$fill-color-default` theme parameter:
 

docs/angular/src/content/en/components/linear-progress.mdx

@@ -87,7 +87,7 @@ You can set the type of your bar, using the <ApiLink type="LinearProgressBar" me
 
 ### Striped Progress
 
-You can make the bar striped, using the <ApiLink type="LinearProgressBar" member="type" label="striped" /> property and by setting it to `true`.
+You can make the bar striped, using the <ApiLink type="LinearProgressBar" member="striped" label="striped" /> property and by setting it to `true`.
 
 Let's see how we can create different types of progress bars that can be both striped or not.
 
@@ -111,11 +111,11 @@ So if we set up everything correctly, you should see the following in your brows
 
 ### Indeterminate Progress
 
-If you want to track a process that is not determined precisely, you can set the <ApiLink type="ProgressBarGradientDirective" member="indeterminate" label="indeterminate" /> input property to `true`.
+If you want to track a process that is not determined precisely, you can set the <ApiLink type="LinearProgressBar" member="indeterminate" label="indeterminate" /> input property to `true`.
 
 ### Animation Duration
 
-The <ApiLink type="ProgressBarGradientDirective" member="animationDuration" label="animationDuration" /> input property is used to specify how long the animation cycle should take.
+The <ApiLink type="LinearProgressBar" member="animationDuration" label="animationDuration" /> input property is used to specify how long the animation cycle should take.
 
 The following example specifies the animation duration set to 5 seconds.
 

docs/angular/src/content/en/grids_templates/column-selection.mdx

@@ -225,7 +225,7 @@ The column selection UI has a few more APIs to explore, which are listed below.
 
 <ApiLink type="{ComponentApiType}" /> events:
 
-- <ApiLink type="{ComponentApiType}" member="onColumnsSelectionChange" label="onColumnsSelectionChange" />
+- <ApiLink type="{ComponentApiType}" member="columnSelectionChanging" label="columnSelectionChanging" />
 
 ## Additional Resources
 

docs/angular/src/content/en/grids_templates/conditional-cell-styling.mdx

@@ -671,7 +671,7 @@ Define a `popin` animation
 ## Known issues and limitations
 
 - If there are cells bind to the same condition (from different columns) and one cell is updated, the other cells won't be updated based on the new value, if the condition is met.
-A pipe check should be performed in order to apply the changes to the rest of the cells. The example below shows how to do that with a `spread operator(...)` on <ApiLink type="Grid" member="onCellEdit" label="onCellEdit" /> event. This will copy the original object with a new instance, and lead pure pipe to be fired.
+A pipe check should be performed in order to apply the changes to the rest of the cells. The example below shows how to do that with a `spread operator(...)` on <ApiLink type="Grid" member="cellEdit" label="cellEdit" /> event. This will copy the original object with a new instance, and lead pure pipe to be fired.
 
 ```ts
 public backgroundClasses = {
@@ -690,7 +690,7 @@ editDone(evt) {
 <ComponentBlock for="Grid">
 
 ```html
-<igx-grid #grid1 [data]="data" height="500px" width="100%" (onCellEdit)="editDone($event)">
+<igx-grid #grid1 [data]="data" height="500px" width="100%" (cellEdit)="editDone($event)">
   <igx-column field="Col1" dataType="number" [cellClasses]="backgroundClasses"></igx-column>
   <igx-column field="Col2" dataType="number" [editable]="true" [cellClasses]="backgroundClasses"></igx-column>
   <igx-column field="Col3" header="Col3" dataType="string" [cellClasses]="backgroundClasses"></igx-column>
@@ -701,7 +701,7 @@ editDone(evt) {
 <ComponentBlock for="TreeGrid">
 
 ```html
-<igx-tree-grid #grid1 [data]="data" height="500px" width="100%" (onCellEdit)="editDone($event)">
+<igx-tree-grid #grid1 [data]="data" height="500px" width="100%" (cellEdit)="editDone($event)">
   <igx-column field="Col1" dataType="number" [cellClasses]="backgroundClasses"></igx-column>
   <igx-column field="Col2" dataType="number" [editable]="true" [cellClasses]="backgroundClasses"></igx-column>
   <igx-column field="Col3" header="Col3" dataType="string" [cellClasses]="backgroundClasses"></igx-column>
@@ -712,7 +712,7 @@ editDone(evt) {
 <ComponentBlock for="HierarchicalGrid">
 
 ```html
-<igx-hierarchical-grid #grid1 [data]="data" height="500px" width="100%" (onCellEdit)="editDone($event)">
+<igx-hierarchical-grid #grid1 [data]="data" height="500px" width="100%" (cellEdit)="editDone($event)">
   <igx-column field="Col1" dataType="number" [cellClasses]="backgroundClasses"></igx-column>
   <igx-column field="Col2" dataType="number" [editable]="true" [cellClasses]="backgroundClasses"></igx-column>
   <igx-column field="Col3" header="Col3" dataType="string" [cellClasses]="backgroundClasses"></igx-column>

docs/angular/src/content/en/grids_templates/row-adding.mdx

@@ -320,10 +320,10 @@ The row adding UI comprises the buttons in the `IgxActionStrip` editing actions,
 
 ## API References
 - <ApiLink type="{ComponentApiType}" member="rowEditable" label="rowEditable" />
-- <ApiLink type="{ComponentApiType}" member="onRowEditEnter" label="onRowEditEnter" />
-- <ApiLink type="{ComponentApiType}" member="onRowEdit" label="onRowEdit" />
+- <ApiLink type="{ComponentApiType}" member="rowEditEnter" label="rowEditEnter" />
+- <ApiLink type="{ComponentApiType}" member="rowEdit" label="rowEdit" />
 - <ApiLink type="{ComponentApiType}" member="rowEditDone" label="rowEditDone" />
-- <ApiLink type="{ComponentApiType}" member="onRowEditCancel" label="onRowEditCancel" />
+- <ApiLink type="{ComponentApiType}" member="rowEditExit" label="rowEditExit" />
 - <ApiLink type="{ComponentApiType}" member="endEdit" label="endEdit" />
 - <ApiLink type="{ComponentApiType}" member="primaryKey" label="primaryKey" />
 - <ApiLink type="{ComponentApiType}" />

docs/angular/src/content/en/grids_templates/row-editing.mdx

@@ -453,10 +453,10 @@ The sample will not be affected by the selected global theme from `Change Theme`
 
 ## API References
 - <ApiLink type="{ComponentApiType}" member="rowEditable" label="rowEditable" />
-- <ApiLink type="{ComponentApiType}" member="onRowEditEnter" label="onRowEditEnter" />
-- <ApiLink type="{ComponentApiType}" member="onRowEdit" label="onRowEdit" />
+- <ApiLink type="{ComponentApiType}" member="rowEditEnter" label="rowEditEnter" />
+- <ApiLink type="{ComponentApiType}" member="rowEdit" label="rowEdit" />
 - <ApiLink type="{ComponentApiType}" member="rowEditDone" label="rowEditDone" />
-- <ApiLink type="{ComponentApiType}" member="onRowEditCancel" label="onRowEditCancel" />
+- <ApiLink type="{ComponentApiType}" member="rowEditExit" label="rowEditExit" />
 - <ApiLink type="{ComponentApiType}" member="endEdit" label="endEdit" />
 - <ApiLink type="Column" member="field" label="field" />
 - <ApiLink type="Column" member="editable" label="editable" />