npm package: @rownd/angular
Description: ## Installation
Latest version: 1.1.2

# Angular

## Installation

Run `npm install @rownd/angular` or `yarn add @rownd/angular`

## Usage

The library provides an Angular Module and Service for dependency injection.

In the main app.module.ts file, add the Rownd module. You'll also need to include include the `@ngrx/store` module as well, as Rownd will drive state updates through it.

```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';

import { StoreModule } from '@ngrx/store';
import { RowndModule } from '@rownd/angular';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    StoreModule.forRoot({}),
    RowndModule.forRoot({ appKey: '<your_app_key>' }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

### Module params
* `appKey` (required): This is the key generated by the [Rownd dashboard](https://app.rownd.io).

## Usage within a component

```ts
import { Component } from '@angular/core';
import { RowndService } from '@rownd/angular';

@Component({
  selector: 'protected-component',
  templateUrl: 'protected.component.html',
  styleUrls: ['protected.component.scss'],
})
export class ProtectedComponent {

  constructor(private rownd: RowndService) {
    // Subscribe to Rownd isAuthenticated observable
    this.rownd.isAuthenticated$.subscribe({
      next(auth) {
        console.log("is Authenticated: ", auth)
      }
    });

    // Subscribe to Rownd User Data observable
    this.rownd.user$.subscribe({
      next(user) {
        console.log("user: ", user)
      }
    });
  }

  signIn() {
    this.rownd.requestSignIn();
  }

  signOut() {
    this.rownd.signOut();
  }
} 
```


## API Reference

#### requestSignIn()

Trigger the Rownd sign-in dialog

```ts
import { RowndService } from '@rownd/angular';

constructor(private rownd: RowndService) {}

this.rownd.requestSignIn()
```


#### signOut()

Signs out the current user and clears their profile, returning them to a completely unauthenticated state.

```ts
import { RowndService } from '@rownd/angular';

constructor(private rownd: RowndService) {}

this.rownd.signOut()
```

#### is_authenticated

Indicates whether the current user is signed-in or not.

```ts
import { RowndService } from '@rownd/angular';

constructor(private rownd: RowndService) {}

// user$ is an observable
this.rownd.user$
```

#### isAuthenticated

Indicates whether the current user is signed in or not.

```ts
import { RowndService } from '@rownd/angular';

constructor(private rownd: RowndService) {}

// isAuthenticated$ is an observable
this.rownd.isAuthenticated$
```

#### user

Represents information about the current user, specifically their profile information. The schema will match whatever you define in the Rownd dashboard.

```ts
import { RowndService } from '@rownd/angular';

constructor(private rownd: RowndService) {}

// user$ is an observable
this.rownd.user$
```

#### isInitializing

`isInitializing` will be `true` until Rownd has fully loaded, recalled its state, and resolved the current user's authentication status. This usually takes only a few milliseconds, but if you make decisions that depend on the `isAuthenticated` flag while `isInitializing` is still `true`, your code/logic may not work as you expect.

```ts
import { RowndService } from '@rownd/angular';

constructor(private rownd: RowndService) {}

// isInitializing$ is an observable
this.rownd.isInitializing$
```