Code Monkey home page Code Monkey logo

ng-devices's Introduction

Angular Devices

Build Status

Demo: https://andre-lehnert.github.io/ng-devices/

ng-devices library

Requires peer dependency: Angular ~7.2.0

Build local library

ng build ng-devices

cd dist/ng-devices

npm pack

Include archive to your project:

package.json

"dependencies": {
    "ng-devices": "file:<path to your archive>/ng-devices-0.0.1.tgz"
}

Build and publish to NPM

TODO

Usage

Import library:

app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgDeviceModule
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Angular Component and HTML:

app.component.ts

...
import {Device} from 'ng-devices';
...

@Component({
  selector: 'app-root',
  template: `
  
    <ng-device [device]="selectedDevice" [landscape]="false">
        <!-- Your content -->
        <h1>Hello World</h1>
    </ng-device>

  `
})
export class AppComponent implements OnInit {

  public selectedDevice: Device = Device.APPLE_MACBOOK_PRO;

  ...
}

Minimal HTML:

<ng-device></ng-device>

angular-devices web component

Demo: https://andre-lehnert.github.io/ng-devices/assets/web-component/

npm run package to generate the angular-devices.js file in the root folder

http-server -o to provide the index.html in the root folder

Optional npm run package:gzip to reduce the file size from 240 KB to 60 KB. The http server have to support content-encoding: gzip response headers.

ng-devices's People

Contributors

andre-lehnert avatar lehnert-andre avatar

Watchers

James Cloos avatar

ng-devices's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.