ng2-bootstrap-base-modified/demo/src/app/components/+alerts/alerts-section.component.html

Native Angular Bootstrap Components Typeahead modified

<demo-section [name]="name" [src]="src">
  <p>Provides contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
  <h2>Contents</h2>
  <ul>
    <li><a routerLink="." fragment="usage">Usage</a></li>
    <li><a routerLink="." fragment="examples">Examples</a>
      <ul>
        <li><a routerLink="." fragment="link-color">Link color</a></li>
        <li><a routerLink="." fragment="additional-content">Additional content</a></li>
        <li><a routerLink="." fragment="dismissing">Dismissing</a></li>
        <li><a routerLink="." fragment="dynamic-html">Dynamic html</a></li>
        <li><a routerLink="." fragment="dismiss-on-timeout">Dismiss on timeout</a></li>
        <li><a routerLink="." fragment="global-styling">Global styling</a></li>
        <li><a routerLink="." fragment="local-styling">Component level styling</a></li>
        <li><a routerLink="." fragment="configuration">Configuring defaults</a></li>
      </ul>
    </li>
    <li><a routerLink="." fragment="api-reference">API Reference</a>
      <ul>
        <li><a routerLink="." fragment="alert-component">AlertComponent</a></li>
        <li><a routerLink="." fragment="alert-config">AlertConfig</a></li>
      </ul>
    </li>
  </ul>

  <h2 routerLink="." fragment="usage" id="usage">Usage</h2>

  <p [innerHtml]="titleDoc"></p>

  <h2 routerLink="." fragment="examples" id="examples">Examples</h2>

  <!-- basic -->
  <p>Alerts are available for any length of text, as well as an optional dismiss
    button. For proper styling, use one of the four <strong>required</strong>
    contextual classes (e.g., <code>.alert-success</code>). For inline
    dismissal, use the <a routerLink="." fragment="dismissing"><code>dismiss
      property</code></a>.</p>

  <ng-sample-box [ts]="demos.basic.component" [html]="demos.basic.html">
    <demo-alert-basic></demo-alert-basic>
  </ng-sample-box>

  <!-- link -->
  <h2 routerLink="." fragment="link-color" id="link-color">Link color</h2>
  <p>Use the <code>.alert-link</code> utility class to quickly provide matching
    colored links within any alert.</p>

  <ng-sample-box [ts]="demos.link.component" [html]="demos.link.html">
    <demo-alert-link></demo-alert-link>
  </ng-sample-box>

  <!-- content -->
  <h2 routerLink="." fragment="additional-content" id="additional-content">Additional content</h2>
  <p>Alerts can also contain additional HTML elements like headings and
    paragraphs.</p>

  <ng-sample-box [ts]="demos.content.component" [html]="demos.content.html">
    <demo-alert-content></demo-alert-content>
  </ng-sample-box>

  <!-- dismiss -->
  <h2 routerLink="." fragment="dismissing" id="dismissing">Dismissing</h2>
  <p>Alerts have <code>dismiss</code> option. Enabling it will show close button
    to the right of the alert.</p>
  <ng-sample-box [ts]="demos.dismiss.component" [html]="demos.dismiss.html">
    <demo-alert-dismiss></demo-alert-dismiss>
  </ng-sample-box>

  <!-- dynamic-html -->
  <h2 routerLink="." fragment="dynamic-html" id="dynamic-html">Dynamic html</h2>
  <p>Sometimes you will need to show dynamically generated html in alerts, here
    is how you can make it. And don't forget to sanitize your html.</p>
  <ng-sample-box [ts]="demos.dynamic.component" [html]="demos.dynamic.html">
    <demo-alert-dynamic-html></demo-alert-dynamic-html>
  </ng-sample-box>

  <!-- dismiss on timeout -->
  <h2 routerLink="." fragment="dismiss-on-timeout" id="dismiss-on-timeout">Dismiss on timeout</h2>
  <p>You can simply set timeout in milliseconds to <code>dismissOnTimeout</code>
    property to create self closable alerts.</p>
  <ng-sample-box [ts]="demos.timeout.component" [html]="demos.timeout.html">
    <demo-alert-timeout></demo-alert-timeout>
  </ng-sample-box>

  <!-- global styling of alerts -->
  <h2 routerLink="." fragment="global-styling" id="global-styling">Global styling</h2>
  <p>You can add additional types of alerts globally.</p>
  <ng-sample-box [ts]="demos.global.component" [html]="demos.global.html">
    <demo-alert-styling-global></demo-alert-styling-global>
  </ng-sample-box>

  <!-- local styling of alerts -->
  <h2 routerLink="." fragment="local-styling" id="local-styling">Component level styling</h2>
  <p>You can add additional types of alerts directly to containing component</p>
  <ng-sample-box [ts]="demos.local.component" [html]="demos.local.html">
    <demo-alert-styling-local></demo-alert-styling-local>
  </ng-sample-box>

  <!-- configuration -->
  <h2 routerLink="." fragment="configuration" id="configuration">Configuring defaults</h2>
  <p>It is possible to override default alert config partially or
    completely.</p>
  <ng-sample-box [ts]="demos.config.component" [html]="demos.config.html">
    <demo-alert-config></demo-alert-config>
  </ng-sample-box>

  <h2 routerLink="." fragment="api-reference" id="api-reference">API Reference</h2>
  <ng-api-doc id="alert-component" directive="AlertComponent"></ng-api-doc>
  <ng-api-doc-config id="alert-config" type="AlertConfig"></ng-api-doc-config>
</demo-section>