qim-app v0.0.9

Using qim-app component

Angular integration

To adding qim-app dependencies at your Angular project.

• Run npm install qim-app to add the dependency in your project.
• Add schemas: [CUSTOM_ELEMENTS_SCHEMA] in AppModule.

import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  bootstrap: [AppComponent],
  
  schemas: [CUSTOM_ELEMENTS_SCHEMA],

})
export class AppModule {}

• In main.ts add an import to import { defineCustomElements } and add the applyPolyfills() that surrond the defineCustomElements() function.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import {applyPolyfills, defineCustomElements} from 'node_modules/qim-app/loader';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

applyPolyfills().then(() => {
  defineCustomElements(window);
});

####Methods To access of public methods from component and apply it

const qimSidenavElement = document.querySelector('qim-sidenav');
qimSidenavElement.close();

###HTML integration

<qim-app>
  <qim-nav>
    <qim-left>
    <qim-icon></qim-icon>
    <qim-logo>
      <!--  APPLICATION TITLE OR LOGO -->
    </qim-logo>
    </qim-left>
    <qim-right>
      <qim-links>
      <!--  NAVIGATION LINKS -->
      </qim-links>
      <qim-user>
         <!--  USER LINKS -->
         <a slot="user-link" href="#">Username</a>
         <!--  USER LOGIN -->
         <a slot="login-link" href="#">Log in</a>
      </qim-user>
    </qim-right>
  </qim-nav>
  <qim-sidenav>
  <!--  NAVIGATION LINKS -->
  </qim-sidenav>
  <qim-content>
  <!--  APPLICATION CONTENT -->
  </qim-content>
</qim-app>

• Available attributes