Notes: Okta OAuth Integration
First steps into Okta dev world
Last updated
First steps into Okta dev world
Last updated
Starting points:
Angular Copied Notes:
You build Angular applications with components. Components define areas of responsibility in the UI that let you reuse sets of UI functionality.
A component consists of three things:
A component class that handles data and functionality.
An HTML template that determines the UI.
Component-specific styles that define the look and feel.
With *ngFor, the <div> repeats for each product in the list.
*ngFor is a Structural directives which shape or reshape the DOM's structure, by adding, removing, and manipulating elements.
<div *ngFor="let product of products">
Interpolation {{ }} lets you render the property value as text.
{{ product.name }}
the <a> element around {{ product.name }} creates a hyperlink
Property binding [ ] lets you use the property value in a template expression. eg. [Title]
<a [title]="product.name + ' details'">
On a <p> element, use an *ngIf directive so that Angular only creates the <p> element if the current product has a description.
<p *ngIf="product.description"> Description: {{ product.description }} </p>
Bind the button's click event to the share() method in product-list.component.ts
<button (click)="share()"> Share </button>
The share method is:
share() { window.alert('The product has been shared!'); }
Creating a new component generates starter files for the three parts of the component:
product-alerts.component.ts
product-alerts.component.html
product-alerts.component.css
The @Component() decorator indicates that the following class is a component. @Component() also provides metadata about the component, including its selector, templates, and styles.
By convention, Angular component selectors begin with the prefix app-, followed by the component name.
The @Component() definition also exports the class, ProductAlertsComponent, which handles functionality for the component.
To make a new component available to other components in the app, in this case ProductAlertsComponent , add it to AppModule's declarations in app.module.ts
git clone sample okta Angular app repo
Installing Node.js and NPM on mac - COMPLETE
