Index: trip-planner-front/src/app/location/add-location/add-location.component.css
===================================================================
--- trip-planner-front/src/app/location/add-location/add-location.component.css	(revision 6fe77af06f1c4e777095cd5ea48f5387322a3f32)
+++ trip-planner-front/src/app/location/add-location/add-location.component.css	(revision 6fe77af06f1c4e777095cd5ea48f5387322a3f32)
@@ -0,0 +1,23 @@
+.example-form {
+    min-width: 150px;
+    max-width: 380px;
+    width: 100%;
+  }
+  
+  .example-full-width {
+    width: 100%;
+  }
+  
+  mat-icon {
+    height: 20px;
+    width: 20px;
+    font-size: 20px;
+    margin-right: 5px;
+  }
+  button{
+    float: right;
+  }
+  
+  .yellow{
+    background-color:yellow;
+  }
Index: trip-planner-front/src/app/location/add-location/add-location.component.html
===================================================================
--- trip-planner-front/src/app/location/add-location/add-location.component.html	(revision 6fe77af06f1c4e777095cd5ea48f5387322a3f32)
+++ trip-planner-front/src/app/location/add-location/add-location.component.html	(revision 6fe77af06f1c4e777095cd5ea48f5387322a3f32)
@@ -0,0 +1,110 @@
+<mat-stepper linear #stepper>
+    <mat-step [stepControl]="firstFormGroup" [editable]="isEditable" [completed]="isCompleted">
+        <form [formGroup]="firstFormGroup">
+            <ng-template matStepLabel>Location properties</ng-template>
+            <mat-form-field appearance="fill">
+                <mat-label>Name</mat-label>
+                <input matInput [(ngModel)]="name" formControlName="name" required>
+            </mat-form-field>
+<label></label>
+            <mat-form-field appearance="fill">
+                <mat-label>Description</mat-label>
+                <input matInput [(ngModel)]="desc" formControlName="desc" required>
+            </mat-form-field>
+<label></label>
+            <mat-form-field appearance="fill">
+                <mat-label>Address</mat-label>
+                <input matInput [(ngModel)]="address" formControlName="address" required>
+            </mat-form-field>
+
+            <mat-form-field appearance="fill">
+                <mat-label>Duration</mat-label>
+                <input matInput [(ngModel)]="duration" type="number" formControlName="duration" required>
+            </mat-form-field>
+
+            <mat-form-field appearance="fill">
+                <mat-label>Trivia</mat-label>
+                <input matInput [(ngModel)]="trivia" formControlName="trivia" required>
+            </mat-form-field>
+
+            <mat-form-field appearance="fill">
+              <mat-label>Priority</mat-label>
+              <mat-select [(ngModel)]="priority" name="priority" [ngModelOptions]="{standalone: true}" >
+                <mat-option *ngFor="let priority of priorities" [value]="priority.value">
+                  {{priority.viewValue}}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+            
+            <label>
+                <h5>Please select a city</h5>
+            </label>
+            <mat-form-field appearance="fill" class="example-full-width">
+                <mat-label>Please select a city</mat-label>
+                <mat-select [(ngModel)]="cityId" placeholder="Select city" name="city" [ngModelOptions]="{standalone: true}">
+                    <mat-option [value]="city.id" *ngFor="let city of cities"> {{city.name}}</mat-option>
+                </mat-select>
+            </mat-form-field>
+            
+            <label>
+                <h5>Please select a region</h5>
+              </label>
+              <mat-form-field appearance="fill" class="example-full-width">
+                <mat-label>Please select a region</mat-label>
+                <mat-select [(ngModel)]="regionId" placeholder="Select region" name="region" [ngModelOptions]="{standalone: true}">
+                  <mat-option [value]="region.id" *ngFor="let region of regions" [value]="region.id"> {{region.name}}
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
+
+              <p-fileUpload #fubauto mode="basic" name="demo[]" url=""  chooseLabel="Image"></p-fileUpload>
+
+            <div>
+                <button mat-button matStepperNext (click)="submitLocation()">Next</button>
+            </div>
+        </form>
+    </mat-step>
+    <mat-step [stepControl]="secondFormGroup" [editable]="isEditable" [completed]="isCompletedSecond">
+        <form [formGroup]="secondFormGroup">
+            <ng-template matStepLabel>Add companion for the location</ng-template>
+            <mat-form-field appearance="fill">
+                <mat-label>Companion</mat-label>
+                <mat-select [formControl]="companionForm" multiple>
+                  <mat-select-trigger>
+                    {{companionForm.value ? companionForm.value[0] : ''}}
+                    <span *ngIf="companionForm.value?.length > 1" class="example-additional-selection">
+                      (+{{companionForm.value.length - 1}} {{companionForm.value?.length === 2 ? 'other' : 'others'}})
+                    </span>
+                  </mat-select-trigger>
+                  <mat-option *ngFor="let companion of companions" [value]="companion">{{companion.type}}</mat-option>
+                </mat-select>
+              </mat-form-field>
+            <div>
+                <button mat-button matStepperNext (click)="onClickSecondForm()">Next</button>
+            </div>
+        </form>
+    </mat-step>
+
+    <mat-step [stepControl]="thirdFormGroup" [editable]="isEditable">
+        <form [formGroup]="thirdFormGroup">
+            <ng-template matStepLabel>Add categories for the location</ng-template>
+            <mat-chip-list selectable multiple>
+                <mat-chip #c="matChip" selected *ngFor="let category of categories" (click)="toggleSelection(c, category)"
+                  [ngClass]="{'yellow' : toggle}" name="chips">
+                  <mat-icon *ngIf="!c.selected">check</mat-icon>
+                  {{category.name}}
+                </mat-chip>
+              </mat-chip-list>
+            <div>
+                <button mat-button matStepperNext>Next</button>
+            </div>
+        </form>
+    </mat-step>
+    <mat-step>
+        <ng-template matStepLabel>Done</ng-template>
+        <p>You are now done.</p>
+        <div>
+            <button mat-button (click)="stepper.reset()">Reset</button>
+        </div>
+    </mat-step>
+</mat-stepper>
Index: trip-planner-front/src/app/location/add-location/add-location.component.ts
===================================================================
--- trip-planner-front/src/app/location/add-location/add-location.component.ts	(revision 6fe77af06f1c4e777095cd5ea48f5387322a3f32)
+++ trip-planner-front/src/app/location/add-location/add-location.component.ts	(revision 6fe77af06f1c4e777095cd5ea48f5387322a3f32)
@@ -0,0 +1,148 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { MatChip } from '@angular/material/chips';
+import { Category } from 'src/app/_models/category';
+import { City } from 'src/app/_models/city';
+import { Companion } from 'src/app/_models/companion';
+import { LocationDto } from 'src/app/_models/dto/locationDto';
+import { Region } from 'src/app/_models/region';
+import { CategoryService } from 'src/app/_services/cateogry.service';
+import { CityService } from 'src/app/_services/city.service';
+import { CompanionService } from 'src/app/_services/companion.service';
+import { LocationService } from 'src/app/_services/location.service';
+import { RegionService } from 'src/app/_services/region.service';
+
+@Component({
+  selector: 'app-add-location',
+  templateUrl: './add-location.component.html',
+  styleUrls: ['./add-location.component.css']
+})
+export class AddLocationComponent implements OnInit {
+    firstFormGroup: FormGroup;
+    secondFormGroup: FormGroup;
+    thirdFormGroup : FormGroup;
+    isEditable = false;
+    categories : Category[] = [];
+    companions : Companion[] = [];
+    cities : City[] = [];
+    cityId : number = 0;
+    regionId : number = 0;
+    regions : Region[] = [];
+    priority: string = '';
+    name: string = '';
+    desc: string = '';
+    address: string = '';
+    duration: number = 0;
+    trivia: string = '';
+    isCompleted = false;
+    locationDto : LocationDto = new LocationDto();
+    companionForm = new FormControl();
+    chipsSeletion: number[] = [];
+    toggle = true;
+    isCompletedSecond = false;
+  
+    priorities: any[] = [
+      {value: 'high', viewValue: 'High'},
+      {value: 'medium', viewValue: 'Medium'},
+      {value: 'low', viewValue: 'Low'},
+    ];
+  
+    constructor(private fb: FormBuilder, private categoryService : CategoryService, 
+      private companionService : CompanionService, private cityService : CityService, private regionService : RegionService,
+      private locationService : LocationService) {
+        this.firstFormGroup = fb.group({
+            title: fb.control('initial value', Validators.required)
+          });
+          this.secondFormGroup = fb.group({
+            title: fb.control('initial value', Validators.required)
+          });
+          this.thirdFormGroup = fb.group({
+            title: fb.control('initial value', Validators.required)
+
+          })
+    }
+  
+    ngOnInit() {
+      this.firstFormGroup = this.fb.group({
+        name: ['', Validators.required],
+        desc: ['', Validators.required],
+        address: ['', Validators.required],
+        priority: ['', Validators.required],
+        trivia: ['', Validators.required],
+        duration: ['', Validators.required],
+      });
+
+      this.secondFormGroup = this.fb.group({
+        secondCtrl: ['', Validators.required],
+      });
+
+      this.categoryService.getAllCategories().subscribe(
+        data => {
+          this.categories = data;
+        }
+      );
+  
+      this.companionService.getAllCompanions().subscribe(
+        data => {
+          this.companions = data;
+        }
+      );
+
+      
+      this.cityService.getAllCities().subscribe(
+        data => {
+          this.cities = data;
+        }
+      );
+
+      this.regionService.getAllRegions().subscribe(
+        data => {
+          this.regions = data;
+        }
+      );
+    }
+
+    submitLocation(){
+      this.locationDto.name = this.name;
+      this.locationDto.description = this.desc;
+      this.locationDto.address = this.address;
+      this.locationDto.duration = this.duration;
+      this.locationDto.trivia = this.trivia;
+      this.locationDto.priority = this.priority;
+      this.locationDto.city = this.cityId;
+      this.locationDto.region = this.regionId;
+      if(this.name !== null && this.desc !== null && this.address !== null
+        && this.trivia != null  && this.priority !== null && this.cityId !== 0 && this.regionId !== 0){
+          this.isCompleted = true;
+        
+          this.locationService.save(this.locationDto).subscribe(
+            data => {
+              console.log(data);
+            }
+          );  
+         
+      }   
+    }
+
+    toggleSelection(chip: MatChip, category: Category) {
+      chip.toggleSelected();
+  
+      if (this.chipsSeletion.length > 0) {
+        if (this.chipsSeletion.indexOf(category.id) <= -1) {
+          this.chipsSeletion.push(category.id);
+        } else {
+          const index = this.chipsSeletion.indexOf(category.id);
+          this.chipsSeletion.splice(index, 1);
+        }
+      } else {
+        this.chipsSeletion.push(category.id);
+      }
+      console.log(this.chipsSeletion);
+    }
+    onClickSecondForm(){
+      if(this.companionForm.value.length >= 1){
+        this.isCompletedSecond = true;
+      }
+      console.log(this.companionForm.value.length)
+    }
+}
