From f5dffe0588d57aa97f886453bc4cfda8c2b4a1a2 Mon Sep 17 00:00:00 2001
From: DanielHabenicht <daniel-habenicht@outlook.de>
Date: Wed, 27 May 2020 21:47:59 +0200
Subject: [PATCH] fix(example): add example for formatter (#293)

* add example for formatter to component.ts

* add preview to html

* add example to readme

* Restyled by prettier-markdown (#294)

closes #292

Co-authored-by: Restyled.io <commits@restyled.io>

Co-authored-by: restyled-io[bot] <32688539+restyled-io[bot]@users.noreply.github.com>
Co-authored-by: Restyled.io <commits@restyled.io>
---
 README.md                  | 78 ++++++++++++++++++++++++++++----------
 src/app/app.component.html |  8 +++-
 src/app/app.component.ts   |  2 +
 3 files changed, 67 insertions(+), 21 deletions(-)

diff --git a/README.md b/README.md
index 9710813a..6e380517 100644
--- a/README.md
+++ b/README.md
@@ -5,14 +5,13 @@
 [![codecov](https://codecov.io/gh/DanielHabenicht/ngx-vcard/branch/master/graph/badge.svg)](https://codecov.io/gh/DanielHabenicht/ngx-vcard)
 [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FDanielHabenicht%2Fngx-vcard.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2FDanielHabenicht%2Fngx-vcard?ref=badge_shield)
 
-
 # ngx-vcard
 
-Almost fully RFC compliant vCard Formatter, that also can download the generated vCard.
-Outputs VCard version 4.
-Maybe other version will be supported.
+Almost fully RFC compliant vCard Formatter, that also can download the generated
+vCard. Outputs VCard version 4. Maybe other version will be supported.
 
-If you want to have another Property, please open up an issue or even better provide a PR. ;)
+If you want to have another Property, please open up an issue or even better
+provide a PR. ;)
 
 ## Installation
 
@@ -23,10 +22,10 @@ If you want to have another Property, please open up an issue or even better pro
 2.  Import in app.module.ts:
 
     ```typescript
-    import { NgxVcardModule } from 'ngx-vcard';
+    import { NgxVcardModule } from "ngx-vcard";
 
     @NgModule({
-      imports: [NgxVcardModule]
+      imports: [NgxVcardModule],
     })
     export class AppModule {}
     ```
@@ -39,20 +38,20 @@ If you want to have another Property, please open up an issue or even better pro
 
 ```typescript
 /* example.component.ts */
-import { Component } from '@angular/core';
-import { VCard } from 'ngx-vcard';
+import { Component } from "@angular/core";
+import { VCard } from "ngx-vcard";
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.css"],
 })
 export class AppComponent {
   public vCard: VCard = {
     name: {
-      firstNames: 'John',
-      lastNames: 'Doe'
-    }
+      firstNames: "John",
+      lastNames: "Doe",
+    },
   };
 }
 ```
@@ -60,18 +59,57 @@ export class AppComponent {
 ```html
 <!-- example.component.html -->
 <div>
-  <button id="downloadButton" [vcdDownloadVCard]="vCard">Download VCard!</button>
+  <button id="downloadButton" [vcdDownloadVCard]="vCard">
+    Download VCard!
+  </button>
 </div>
 ```
 
 ### Use as Formatter
 
-- TODO: Add .ts File example
+[Look here for a Stackblitz Example](https://stackblitz.com/github/DanielHabenicht/ngx-vcard)
 
-## Mentions
+```typescript
+/* example.component.ts */
+import { Component } from "@angular/core";
+import { VCardFormatter, VCard } from "ngx-vcard";
+
+@Component({
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.css"],
+})
+export class AppComponent {
+  public vCard: VCard = {
+    name: {
+      firstNames: "John",
+      lastNames: "Doe",
+    },
+  };
 
-This project is heavily inspired from the [vCards-js](https://github.com/enesser/vCards-js) Package from Eric J Nesser.
+  public vCardString = VCardFormatter.getVCardAsString(this.vCard);
 
+  public ngOnInit() {
+    console.log(this.vCardString);
+  }
+}
+```
+
+```html
+<!-- example.component.html -->
+<p>
+  VCard String:
+</p>
+<p>
+  {{vCardString}}
+</p>
+```
+
+## Mentions
+
+This project is heavily inspired from the
+[vCards-js](https://github.com/enesser/vCards-js) Package from Eric J Nesser.
 
 ## License
-[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FDanielHabenicht%2Fngx-vcard.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2FDanielHabenicht%2Fngx-vcard?ref=badge_large)
\ No newline at end of file
+
+[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FDanielHabenicht%2Fngx-vcard.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2FDanielHabenicht%2Fngx-vcard?ref=badge_large)
diff --git a/src/app/app.component.html b/src/app/app.component.html
index be4fad0f..57899b06 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,3 +1,9 @@
 <div>
   <button id="downloadButton" [vcdDownloadVCard]="vCard" [encoding]="vCardEncoding.none">Download VCard!</button>
-</div>
\ No newline at end of file
+</div>
+<p>
+  VCard String Preview:
+</p>
+<p>
+  {{vCardString}}
+</p>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7adfdb70..4888ec4e 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { VCard } from 'ngx-vcard';
 import { VCardEncoding } from 'ngx-vcard';
+import { VCardFormatter } from 'ngx-vcard';
 
 @Component({
   selector: 'app-root',
@@ -10,4 +11,5 @@ import { VCardEncoding } from 'ngx-vcard';
 export class AppComponent {
   public vCardEncoding: typeof VCardEncoding = VCardEncoding;
   public vCard: VCard = { name: { firstNames: 'John', lastNames: 'Doe' } };
+  public vCardString = VCardFormatter.getVCardAsString(this.vCard)
 }