added

Author: mohitj2401

package-lock.json

@@ -19,6 +19,7 @@
     "@angular/platform-browser-dynamic": "^14.1.0",
     "@angular/router": "^14.1.0",
     "bootstrap": "^5.2.0",
+    "ckeditor4-angular": "^3.1.1",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

package.json

@@ -9,6 +9,9 @@ import { HomeComponent } from './home/home.component';
 import { StoryComponent } from './story/story.component';
 import { DiaryComponent } from './diary/diary.component';
 import { IdeaComponent } from './idea/idea.component';
+import { ReactiveFormsModule } from '@angular/forms';
+import { CKEditorModule } from 'ckeditor4-angular';
+
 
 @NgModule({
   declarations: [
@@ -22,7 +25,9 @@ import { IdeaComponent } from './idea/idea.component';
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    ReactiveFormsModule,
+    CKEditorModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/app.module.ts

@@ -97,5 +97,24 @@
                 <button class="btn btn-outline-danger">Delete</button>
             </div>
         </div>
+        <div *ngIf="createStory" class="mx-5 my-4">
+            <p class="fs-3 text-center">Add Your Story</p>
+            <form [formGroup]="storyForm">
+                <div class="form-floating mb-3">
+                    <input type="text" class="form-control" id="floatingInputValue" formControlName="title">
+                    <label for="floatingInputValue">Title</label>
+                </div>
+
+                <ckeditor data="<p>Hello, world!</p>" formControlName="content"></ckeditor>
+                <div class="form-floating my-3">
+                    <input type="date" class="form-control" id="floatingInputValue" formControlName="title">
+                    <label for="floatingInputValue">Completion Date</label>
+                </div>
+
+                <button type="submit" (click)="addStory();createStory=false;listing=true" class="btn btn-primary">Submit
+                </button>
+
+            </form>
+        </div>
     </div>
 </div>

src/app/story/story.component.html

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+// import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
 
 @Component({
   selector: 'app-story',
@@ -7,9 +9,21 @@ import { Component, OnInit } from '@angular/core';
 })
 export class StoryComponent implements OnInit {
 
-  constructor() { }
-  listing: boolean = true;
+  listing: boolean = false;
+  createStory: boolean = true;
+  // public editor = ClassicEditor;
+  storyForm!: FormGroup;
+  constructor(private formbuilder: FormBuilder) { }
+
   ngOnInit(): void {
+    this.storyForm = this.formbuilder.group({
+      title: ['', [Validators.required, Validators.minLength(255)]],
+      content: ['', Validators.required],
+      date: ['', [Validators.required]],
+    });
   }
+  addStory() {
+
 
+  }
 }

src/app/story/story.component.ts

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

src/app/story/story.ts

@@ -9,6 +9,7 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
+    "noImplicitAny": false,
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": false,
@@ -18,6 +19,7 @@
     "importHelpers": true,
     "target": "es2020",
     "module": "es2020",
+    "allowJs": true,
     "lib": [
       "es2020",
       "dom"
@@ -29,4 +31,4 @@
     "strictInputAccessModifiers": true,
     "strictTemplates": true
   }
-}
+}