ngx-qrcode - GitLite

KO | EN

gitlite — search

#javascript #go #golang #rust #macos #java #windows #awesome #cli #kubernetes #awesome-list #vue #security #openai

ngx-qrcode

(★ 193)

An Angular 9/10 Component Library for Generating QR (Quick Response) Codes

파일 탐색기

최종 버전 다운로드 (.zip)

- CODE_OF_CONDUCT.md
- CONTRIBUTING.md
- ISSUE_TEMPLATE.md
- - karma.conf.js
  - ng-package.json
  - package.json
  - README.md
  - tsconfig.lib.json
  - tsconfig.lib.prod.json
  - tsconfig.spec.json
  - tslint.json
- - browserslist
  - karma.conf.js
  - tsconfig.app.json
  - tsconfig.spec.json
  - tslint.json
.editorconfig
.gitignore
.huskyrc.json
.npmignore
.npmrc
angular.json
CHANGELOG.md
LICENSE
package.json
README.md
tsconfig.json
tslint.json
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/techiediaries/ngx-qrcode

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd ngx-qrcode

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

! ⚠️ WARNING: The NPM package ngx-qrcode2 has been deprecated. Use @techiediaries/ngx-qrcode instead.

이 명령어를 터미널에 그대로 입력해 실행하세요.

$ npm install @techiediaries/ngx-qrcode --save

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

$ yarn add @techiediaries/ngx-qrcode

이 명령어를 터미널에 그대로 입력해 실행하세요.

$ npm run build

배포용으로 코드를 최적화해서 빌드 파일을 생성합니다.

$ yarn build

배포용으로 코드를 최적화해서 빌드 파일을 생성합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# @techiediaries/ngx-qrcode

```diff
! ⚠️ WARNING: The NPM package ngx-qrcode2 has been deprecated. Use @techiediaries/ngx-qrcode instead.
```

`@techiediaries/ngx-qrcode` An Angular Component library for Generating QR (Quick Response ) Codes.

You can use the `@techiediaries/ngx-qrcode` to easily generate QR codes inside your Angular 6 or Ionic 3 applications

>QR code (abbreviated from Quick Response Code) is the trademark for a type of matrix barcode (or two-dimensional barcode) first designed for the automotive industry in Japan. A barcode is a machine-readable optical label that contains information about the item to which it is attached. A QR code uses four standardized encoding modes (numeric, alphanumeric, byte/binary, and kanji) to efficiently store data; extensions may also be used. [Source](https://en.wikipedia.org/wiki/QR_code)

> Note: Make sure to check [10xdev.space](https://10xdev.space/) for career growth, money making tips and learning paths for developers.

## How to install @techiediaries/ngx-qrcode?

To use ngx-qrcode in your project, install it via npm or yarn:

```bash
$ npm install @techiediaries/ngx-qrcode --save
or
$ yarn add @techiediaries/ngx-qrcode
```

## How to use @techiediaries/ngx-qrcode?

For a complete and detailed tutorial on how to use this library. See:

[How to Generate QR Codes In Angular 4+ Applications ](https://www.techiediaries.com/generate-qrcodes-angular)

Import `NgxQRCodeModule` from `@techiediaries/ngx-qrcode`  into your `app.module.ts`:

```ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode';

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

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

Once the library has been imported, you can use the ngx-qrcode component in your Angular application.

In `app.component.html`, add:
```html

<div style="text-align:center">
  <h1>
    @techiediaries/ngx-qrcode demo 
  </h1>
</div>

<ngx-qrcode 
  [elementType]="elementType" 
  [value]="value"
  cssClass="aclass"
  errorCorrectionLevel="L">
</ngx-qrcode>

```
In `app.component.ts`, add:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  elementType = 'url';
  value = 'Techiediaries';
}
```

# Contributing
Please see [Contributing Guidelines](.github/CONTRIBUTING.md).

## How to develop @techiediaries/ngx-qrcode?

To generate all `*.js`, `*.d.ts` and `*.metadata.json` files:

```bash
$ npm run build
or
$ yarn build

```

To lint all `*.ts` files:

```bash
$ npm run lint
or
$ yarn lint
```

## How to run unit tests?

In development mode:

```bash
$ npm run test:watch ngx-qrcode
or
$ yarn test:watch ngx-qrcode
```
Add `--codeCoverage` option to see code coverage in `coverage` folder.

## How to publish libraries?

```bash
$ npm run lib:publish
or
$ yarn lib:publish
```

# Code of Conduct
Please see [Code of Conduct](.github/CODE_OF_CONDUCT.md).

## License
[MIT](/LICENSE) © [Techiediaries](mailto:techiediaries9@gmail.com)

## Troubleshoots

With Angular CLI 8.X.X you should add this lines to polyfills.ts

```typescript
// Needed by Buffer needed by QRCode
// tslint:disable-next-line:no-string-literal
(window as any)['global'] = window;
```