toaster added

Author: mohitj2401

angular.json

@@ -23,7 +23,8 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.css",
+              "node_modules/ngx-toastr/toastr.css"    
             ],
             "scripts": []
           },

package-lock.json

@@ -10,7 +10,7 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^14.1.0",
+    "@angular/animations": "^14.1.1",
     "@angular/common": "^14.1.0",
     "@angular/compiler": "^14.1.0",
     "@angular/core": "^14.1.0",
@@ -19,6 +19,8 @@
     "@angular/platform-browser-dynamic": "^14.1.0",
     "@angular/router": "^14.1.0",
     "bootstrap": "^5.2.0",
+    "ckeditor4-angular": "^3.1.1",
+    "ngx-toastr": "^15.0.0",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

package.json

@@ -11,6 +11,10 @@ import { DiaryComponent } from './diary/diary.component';
 import { IdeaComponent } from './idea/idea.component';
 import { ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
+import { CKEditorModule } from 'ckeditor4-angular';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { SafeHtmlPipe } from './safe-html.pipe';
+import { ToastrModule } from 'ngx-toastr';
 
 
 @NgModule({
@@ -21,13 +25,18 @@ import { HttpClientModule } from '@angular/common/http';
     HomeComponent,
     StoryComponent,
     DiaryComponent,
-    IdeaComponent
+    IdeaComponent,
+    SafeHtmlPipe,
+
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     ReactiveFormsModule,
-    HttpClientModule
+    HttpClientModule,
+    CKEditorModule,
+    ToastrModule.forRoot(),
+    BrowserAnimationsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/app.module.ts

@@ -0,0 +1,8 @@
+import { SafeHtmlPipe } from './safe-html.pipe';
+
+describe('SafeHtmlPipe', () => {
+  it('create an instance', () => {
+    const pipe = new SafeHtmlPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/safe-html.pipe.spec.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'safeHtml'
+})
+export class SafeHtmlPipe implements PipeTransform {
+
+  constructor(private sanitizer: DomSanitizer) { }
+
+  transform(value) {
+    return this.sanitizer.bypassSecurityTrustHtml(value);
+  }
+
+}

src/app/safe-html.pipe.ts

@@ -1,22 +1,27 @@
 <div style="min-height:82vh;">
     <div class="container">
-        <div *ngIf="listing">
+
+
+        <div *ngIf="listing" class="my-5">
+
+
+            <div class="row">
+                <span class="fs-3 ">Your Stories
+                    <button class="btn btn-secondary float-end" (click)="listing=false;createStory=true;">Add
+                        New</button></span>
+            </div>
             <div class="mx-5 py-3" *ngFor="let story of stories">
 
                 <div class="row pb-2">
                     <div>
                         <span class="float-start fs-3"> {{story.title}}</span>
-                        <span class="float-end text-primary"> Date :- {{story.com}}</span>
+                        <span class="float-end text-primary"> Date :- {{story.created_at}}</span>
 
                     </div>
                 </div>
 
 
-                <p>Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
-                    labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi
-                    animcupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est
-                    aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia
-                    pariatur ut officia...</p>
+                <div [innerHTML]="story.content | safeHtml" class="p-2"></div>
 
                 <button class="btn btn-outline-secondary me-2" (click)="listing=!listing">Edit</button>
                 <button class="btn btn-outline-danger">Delete</button>
@@ -30,9 +35,10 @@
                     <input type="text" class="form-control" id="floatingInputValue" formControlName="title">
                     <label for="floatingInputValue">Title</label>
                 </div>
-
+                <ckeditor #editor formControlName="content">
+                </ckeditor>
                 <div class="form-floating my-3">
-                    <input type="date" class="form-control" id="floatingInputValue" formControlName="date">
+                    <input type="date" class="form-control" id="floatingInputValue" formControlName="created_at">
                     <label for="floatingInputValue">Completion Date</label>
                 </div>
 

src/app/story/story.component.html

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Story } from './story';
 import { StoryService } from './story.service';
+import { ToastrService } from 'ngx-toastr';
 
 
 @Component({
@@ -11,30 +12,44 @@ import { StoryService } from './story.service';
 })
 export class StoryComponent implements OnInit {
 
-  listing: boolean = false;
-  createStory: boolean = true;
+
+  listing: boolean = true;
+  createStory: boolean = false;
   storyForm!: FormGroup;
   stories!: Story[];
+  successMessage: String = "ss";
+  errorMessage!: String;
 
-  constructor(private formbuilder: FormBuilder, private storyService: StoryService) { }
+  constructor(private formbuilder: FormBuilder, private storyService: StoryService, private toastr: ToastrService) { }
 
   ngOnInit(): void {
+
     this.getStories();
     this.storyForm = this.formbuilder.group({
       title: ['', [Validators.required, Validators.minLength(255)]],
       content: ['', Validators.required],
-      date: ['', [Validators.required]],
+      created_at: ['', [Validators.required]],
     });
 
   }
   addStory() {
+    var story = this.storyForm.getRawValue();
+    this.storyService.addStories(story).subscribe({
+      next: (stories) => {
 
+        this.toastr.success("Data inserted successfully !!")
+        this.stories.push(story);
+      },
+      error: errror => console.log(errror),
+    });
 
   }
+
   getStories() {
+
     this.storyService.getStories().subscribe({
       next: (stories) => {
-        console.log(stories);
+
         this.stories = stories;
       },
       error: errror => console.log(errror),

src/app/story/story.component.ts

@@ -1,5 +1,5 @@
 export class Story {
     title!: String;
     content!: String;
-    com!: Date;
+    created_at!: Date;
 }