The ARN If component allows you to conditionally show or hide HTML slots based on a specified condition. Here's how you can use it:

<arn-if condition="1+1==2">
  <div slot="if-false">
    Maybe not using a decimal system?
  </div>
  <div slot="if-true">
    Hello decimal world!
  </div>
</arn-if>

Inside the <arn-if> component, you can define HTML content within slots. The slots are labeled as "if-false" and "if-true", corresponding to the condition being false or true, respectively. You can include any HTML content, including other components, Angular components, or web components (including other ARN Components). Additionally, you can add attributes to the slots, such as class names.

Angular Example

Here's an example that demonstrates using the <arn-if> component along with the ARN Client API to conditionally display HTML based on the wallet connection state:

<arn-if [attr.condition]="arnClient.auth.isConnected()">
  <div slot="if-false">
    You're not wallet-connected.
  </div>
  <div slot="if-true">
    Hello connected!
  </div>
</arn-if>

In this example, the condition is defined using the arnClient.auth.isConnected() function from the ARN Client API.

πŸ“Œ

Note that in Angular, arnClient is assumed to be a public field of the Angular component. Make sure to expose it to the template by declaring it as a public field:

declare const arnClient: ArnClient;

@Component({
  selector: 'app-using-arn-if',
  templateUrl: './app-using-arn-if.component.html',
  styleUrls: ['./app-using-arn-if.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class UsingArnIfComponent {
  
  get arnClient(): ArnClient {
    return arnClient;
  }
}

⚠️

Keep in mind that the condition may not be re-evaluated automatically if the connection status changes. In the above example, you might need to listen to arnClient.auth.status$ to detect changes and update an Angular variable accordingly. Alternatively, you can use the <arn-if-connected> custom element, which provides a more straightforward way to handle wallet connection state.