Outsource comment-create-component

src/app/components/creator/comment-creator-page/comment-creator-page.component.scss

-app-comment-list {
-  width: 100%;
-  max-width: 800px;
-}

src/app/components/shared/comment-list/comment-list.component.scss

 mat-card {
   margin-bottom: 10px;
   background-color: #4db6ac;
+  border-radius: 8px;
+  width: 100%;
+  max-width: 800px;
 }
 
 app-comment {
@@ -10,7 +13,7 @@ app-comment {
 
 input {
   box-sizing: border-box;
-  padding: 0 10px 0 20px; 
+  padding: 0 10px 0 20px;
   width: 100%;
   background-color: #4db6ac;
   border: none;

src/app/components/shared/comments-creator-shared/comments-creator-shared.component.html

+<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px">
+  <div fxLayout="row" fxLayoutAlign="center">
+    <form>
+      <mat-form-field class="input-block">
+        <input matInput #commentSubject type="text" maxlength="25"
+               placeholder="{{ 'comment-page.enter-title' | translate}}" onkeypress="return event.keyCode !=13;"
+               [formControl]="subjectForm">
+        <mat-hint align="end">{{commentSubject.value.length}} / 25</mat-hint>
+      </mat-form-field>
+      <mat-form-field class="input-block">
+        <textarea matInput #commentBody placeholder="{{ 'comment-page.enter-comment' | translate}}"
+                  matAutosizeMinRows=2 matAutosizeMaxRows=5  maxlength="255" [formControl]="bodyForm"></textarea>
+        <mat-hint align="end">{{commentBody.value.length}} / 255</mat-hint>
+      </mat-form-field>
+      <button mat-raised-button color="accent"
+              (click)="send(commentSubject.value, commentBody.value)">{{ 'comment-page.send' | translate}}</button>
+    </form>
+  </div>
+  <div fxLayout="row" fxLayoutAlign="center">
+  </div>
+</div>

src/app/components/shared/comments-creator-shared/comments-creator-shared.component.scss

+form {
+  display: block;
+  width: 100%;
+  max-width: 800px;
+  margin-bottom: 50px;
+}
+
+button {
+  margin-right: 20px;
+  min-width: 80px;
+}
+
+textarea {
+  line-height: 120%;
+}

src/app/components/shared/comments-creator-shared/comments-creator-shared.component.spec.ts

+/* import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommentsCreatorSharedComponent } from './comments-creator-shared.component';
+
+describe('CommentsCreatorSharedComponent', () => {
+  let component: CommentsCreatorSharedComponent;
+  let fixture: ComponentFixture<CommentsCreatorSharedComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CommentsCreatorSharedComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CommentsCreatorSharedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+}); */

src/app/components/shared/comments-creator-shared/comments-creator-shared.component.ts

+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { FormControl, Validators } from '@angular/forms';
+import { TranslateService } from '@ngx-translate/core';
+import { Comment } from '../../../models/comment';
+import { CommentService } from '../../../services/http/comment.service';
+import { NotificationService } from '../../../services/util/notification.service';
+import { AuthenticationService } from '../../../services/http/authentication.service';
+import { User } from '../../../models/user';
+import { CommentListComponent } from '../comment-list/comment-list.component';
+
+@Component({
+  selector: 'app-comments-creator-shared',
+  templateUrl: './comments-creator-shared.component.html',
+  styleUrls: ['./comments-creator-shared.component.scss']
+})
+export class CommentsCreatorSharedComponent implements OnInit {
+
+  @ViewChild(CommentListComponent) child: CommentListComponent;
+  roomId: string;
+  roomShortId: string;
+  user: User;
+  private date = new Date(Date.now());
+  subjectForm = new FormControl('', [Validators.required]);
+  bodyForm = new FormControl('', [Validators.required]);
+
+
+  constructor(
+    protected authenticationService: AuthenticationService,
+    private route: ActivatedRoute,
+    private commentService: CommentService,
+    private notification: NotificationService,
+    private translationService: TranslateService) { }
+
+  ngOnInit(): void {
+    this.user = this.authenticationService.getUser();
+    this.roomShortId = this.route.snapshot.paramMap.get('roomId');
+    this.roomId = localStorage.getItem(`roomId`);
+  }
+
+  send(subject: string, body: string): void {
+    subject = subject.trim();
+    body = body.trim();
+    if (!subject && !body) {
+      this.translationService.get('comment-page.error-both-fields').subscribe(message => {
+        this.notification.show(message);
+      });
+      return;
+    }
+    if (!subject) {
+      this.translationService.get('comment-page.error-title').subscribe(message => {
+        this.notification.show(message);
+      });
+      return;
+    }
+    if (!body) {
+      this.translationService.get('comment-page.error-comment').subscribe(message => {
+        this.notification.show(message);
+      });
+      return;
+    }
+    this.commentService.addComment({
+      id: '',
+      roomId: this.roomId,
+      userId: this.user.id,
+      subject: subject,
+      body: body,
+      creationTimestamp: this.date.getTime(),
+      read: false,
+      revision: ''
+    } as Comment).subscribe(() => {
+      this.child.getComments();
+      this.notification.show(`Comment '${subject}' successfully created.`);
+    });
+  }
+}