Angular new component/ new attributes - html

Question

I want when i click new component button and add name,description,select type and add new attribute like default value and type, all information to be saved and new button to appear in drag and drop section. Please help me how to do it.
html and ts:

Answer 1

html:
<button
tuiButton
type="button"
size="m"
class="tui-space_right-3 tui-space_bottom-3"
(click)="showDialog()"
>
Neue Komponente
</button>
<ng-template
let-observer
[tuiDialogOptions]="{label: 'Neue Komponente', size: 's'}"
[(tuiDialog)]="open"
>
<form action="http://localhost:8080/komponente/save"
method = "POST"
[formGroup]="exampleForm"
(ngSubmit)="submitComponent(); observer.complete()"
>
<p></p>
<tui-input
tuiAutoFocus
formControlName="nameOfComponent"
id="nameInput"
>
Name
</tui-input>
<tui-input
tuiAutoFocus
formControlName="description"
>
Beschreibung
</tui-input>
<tui-select
#select
class="b-form"
[(ngModel)]="chosenComponent"
>Komponententyp
<tui-data-list *tuiDataList>
<tui-opt-group label="">
<button
*ngFor="let component of componentTypes"
tuiOption
[value]="component"
>
{{ component }}
</button>
</tui-opt-group>
</tui-data-list>
</tui-select>
<button
tuiButton
type="button"
size="m"
appearance="secondary"
class="tui-space_right-3 tui-space_bottom-3"
(click)="addNewAttributeButtonClick()"
>
Neues Attribut
</button>
<form [formGroup]="DragAndDropForm" (ngSubmit)="onSubmit()" class="form-horisontal"></form>
<div class="form-group" [hidden]="IsHidden">
<label class="col-md-8 control-label" for="defaultValue">
Default-Wert
</label>
<div class="col-md-8">
<input id="defaultValue" formControlName="defaultValue" type="number" class="form-contol">
</div>
</div>
<label class="col-md-8 control-label"></label>
<div class="col-md-8" [hidden]="IsHidden">
<label class="radio-inline" for="type">
Typ:
</label>
<label class="radio-inline">
<input id="radiobutton" type="radio" value="option1"
name="radiobutton">int
</label>
<label class="radio-inline">
<input id="radiobutton" type="radio" value="option2"
name="radiobutton">float
</label>
</div>
<p>
<button
tuiButton
type="submit"
>
Speichern
</button>
</p>
</form>
</ng-template>
<tui-accordion class="container" cdkDropList>
<tui-accordion-item>
Einspeiser
<ng-template tuiAccordionItemContent>
<div class="kraftwerk-box" cdkDrag>
<svg xmlns="http://www.w3.org/2000/svg" width="4em" height="4em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="#85b6ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M3 21h18M5 21V9l5 4V9l5 4h4"/><path d="M19 21v-8l-1.436-9.574A.5.5 0 0 0 17.069 3h-1.145a.5.5 0 0 0-.494.418L14 12m-5 5h1m4 0h1"/></g></svg>
</div>
<div #content>
Kraftwerk
</div>
<div class="kraftwerk-box" cdkDrag>
<svg xmlns="http://www.w3.org/2000/svg" width="4em" height="4em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="#85b6ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M9 16v-5a2 2 0 1 0-4 0m10 5v-5a2 2 0 1 1 4 0"/><path d="M12 16V6a3 3 0 0 1 6 0M6 6a3 3 0 0 1 6 0M3 16h18v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-2z"/></g></svg>
</div>
<div #content>
Wasserquelle
</div>
<div class="kraftwerk-box" cdkDrag>
<svg xmlns="http://www.w3.org/2000/svg" width="4em" height="4em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="#85b6ff" d="m2.475 19.6l1.2-6q.125-.7.688-1.15Q4.925 12 5.65 12h12.7q.725 0 1.288.45q.562.45.687 1.15l1.2 6q.2.95-.412 1.675Q20.5 22 19.55 22H4.45q-.95 0-1.562-.725q-.613-.725-.413-1.675ZM6 3q0 .425-.287.712Q5.425 4 5 4H4q-.425 0-.712-.288Q3 3.425 3 3t.288-.713Q3.575 2 4 2h1q.425 0 .713.287Q6 2.575 6 3ZM4.45 20H11v-2H4.85l-.4 2ZM7.525 6.5q.3.3.3.713q0 .412-.3.712l-.7.7q-.275.275-.687.275q-.413 0-.713-.275q-.3-.3-.3-.713q0-.412.3-.712l.7-.7q.275-.275.687-.275q.413 0 .713.275ZM5.25 16H11v-2H5.65ZM12 7Q9.925 7 8.463 5.537Q7 4.075 7 2h2q0 1.25.875 2.125T12 5q1.25 0 2.125-.875T15 2h2q0 2.075-1.462 3.537Q14.075 7 12 7Zm0-5Zm0 6q.425 0 .713.287Q13 8.575 13 9v1q0 .425-.287.712Q12.425 11 12 11t-.712-.288Q11 10.425 11 10V9q0-.425.288-.713Q11.575 8 12 8Zm1 12h6.55l-.4-2H13Zm0-4h5.75l-.4-2H13Zm3.475-9.5q.275-.275.7-.275q.425 0 .7.275l.7.7q.3.3.313.7q.012.4-.288.7q-.3.3-.712.3q-.413 0-.713-.3l-.7-.7q-.275-.3-.287-.7q-.013-.4.287-.7ZM21 3q0 .425-.288.712Q20.425 4 20 4h-1q-.425 0-.712-.288Q18 3.425 18 3t.288-.713Q18.575 2 19 2h1q.425 0 .712.287Q21 2.575 21 3Z"/></svg>
</div>
<div #content>
Solaranlage
</div>
</ng-template>
</tui-accordion-item>
<tui-accordion-item>
Versorgung
<ng-template tuiAccordionItemContent>
<div class="kraftwerk-box" cdkDrag>
<svg xmlns="http://www.w3.org/2000/svg" width="4em" height="4em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="#85b6ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M3 21h18M5 21V9l5 4V9l5 4h4"/><path d="M19 21v-8l-1.436-9.574A.5.5 0 0 0 17.069 3h-1.145a.5.5 0 0 0-.494.418L14 12m-5 5h1m4 0h1"/></g></svg>
</div>
<div #content>
Kraftwerk
</div>
</ng-template>
</tui-accordion-item>
<tui-accordion-item>
Verträge
<ng-template tuiAccordionItemContent>
<div class="kraftwerk-box" cdkDrag>
<svg style="color: rgb(133, 182, 255);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M292.7 342.3C289.7 345.3 288 349.4 288 353.7V416h62.34c4.264 0 8.35-1.703 11.35-4.727l156.9-158l-67.88-67.88L292.7 342.3zM568.5 167.4L536.6 135.5c-9.875-10-26-10-36 0l-27.25 27.25l67.88 67.88l27.25-27.25C578.5 193.4 578.5 177.3 568.5 167.4zM256 0v128h128L256 0zM256 448c-16.07-.2852-30.62-9.359-37.88-23.88c-2.875-5.875-8-6.5-10.12-6.5s-7.25 .625-10 6.125l-7.749 15.38C187.6 444.6 181.1 448 176 448H174.9c-6.5-.5-12-4.75-14-11L144 386.6L133.4 418.5C127.5 436.1 111 448 92.45 448H80C71.13 448 64 440.9 64 432S71.13 416 80 416h12.4c4.875 0 9.102-3.125 10.6-7.625l18.25-54.63C124.5 343.9 133.6 337.3 144 337.3s19.5 6.625 22.75 16.5l13.88 41.63c19.75-16.25 54.13-9.75 66 14.12C248.5 413.2 252.2 415.6 256 415.9V347c0-8.523 3.402-16.7 9.451-22.71L384 206.5V160H256c-17.67 0-32-14.33-32-32L224 0H48C21.49 0 0 21.49 0 48v416C0 490.5 21.49 512 48 512h288c26.51 0 48-21.49 48-48V448H256z" fill="#85b6ff"></path></svg>
</div>
<div #content>
Kaufvertrag
</div>
</ng-template>
</tui-accordion-item>
<tui-accordion-item>
Märkte
<ng-template tuiAccordionItemContent>
<div class="kraftwerk-box" cdkDrag>
Kraftwerk
</div>
</ng-template>
</tui-accordion-item>
<tui-accordion-item>
Speicher
<ng-template tuiAccordionItemContent>
<div class="kraftwerk-box" cdkDrag>
Kraftwerk
</div>
</ng-template>
</tui-accordion-item>
<tui-accordion-item>
Umwandler
<ng-template tuiAccordionItemContent>
<div class="kraftwerk-box" cdkDrag>
Kraftwerk
</div>
</ng-template>
</tui-accordion-item>
<tui-accordion-item>
Knoten/Bilanzen
<ng-template tuiAccordionItemContent>
<div class="kraftwerk-box" cdkDrag>
Kraftwerk
</div>
</ng-template>
</tui-accordion-item>
<tui-accordion-item>
Container
<ng-template tuiAccordionItemContent>
<div class="kraftwerk-box" cdkDrag>
Kraftwerk
</div>
</ng-template>
</tui-accordion-item>
</tui-accordion>
ts:
import { WorkspaceComponent } from './../workspace/workspace.component';
import { Component, OnInit } from '#angular/core';
import {DragDropModule} from '#angular/cdk/drag-drop';
import {ChangeDetectionStrategy, Inject} from '#angular/core';
import { ApiService } from '../services/api.service';
import {TuiDialogService} from '#taiga-ui/core';
import {FormArray, Validators} from '#angular/forms';
import { TabService } from '../services/tab.service';
import { FormGroup, FormControl } from '#angular/forms';
#Component({
selector: 'app-drag-and-drop',
templateUrl: './drag-and-drop.component.html',
styleUrls: ['./drag-and-drop.component.css']
})
export class DragAndDropComponent implements OnInit {
fb: any;
profileForm: any;
DragAndDropForm: FormGroup
constructor( #Inject(TuiDialogService) private readonly dialogService: TuiDialogService,
#Inject(ApiService) public apiService: ApiService,) { }
onSubmit(): void {
console.log(this.DragAndDropForm.value);
}
apps =
[
{
id: 1,
name: "Instagram"
},
{
id: 2,
name: "Facebook"
}
];
selectedApps = [];
// allowDrop(event) {
// event.preventDefault();
// }
// drag(event, appID: number) {
// event.dataTransfer.setData("dragApp", appID);
// return true;
// }
// drop(event) {
// const itemIndex = event.dataTransfer.getData("dragApp") - 1;
// this.selectedApps.push(this.apps[itemIndex]);
// console.log(this.selectedApps);
// }
// showDialog(): void {
// this.dialogService
// .open(`This is a plain string dialog`, {label: `Heading`, size: `s`})
// .subscribe();
// }
showDialogWithCustomButton(): void {
this.dialogService
.open(`Good, Anakin, Good!`, {
label: `Star wars. Episode III`,
size: `s`,
data: {button: `Do it!`},
})
.subscribe();
}
exampleForm = new FormGroup({
nameOfComponent: new FormControl(``),
description: new FormControl(''),
});
testForm = new FormGroup({
testValue: new FormControl(),
});
componentTypes = ['Einspeiser', 'Versorgung' ,'Vertrag', 'Markt', 'Speicher', 'Umwandler', 'Knoten/Bilanz', 'Container'];
chosenComponent = this.componentTypes[0];
open = false;
showDialog(): void {
this.open = true;
}
submitComponent(): void{
this.apiService.postComponent("document.getElementById('nameInput').value", "desc", "http://www.w3.org/2000/svg").subscribe((result)=>{console.warn(result)});
console.log(this.apiService.updateComponents());
}
ngOnInit() {
this.DragAndDropForm = new FormGroup({
fullName: new FormControl(),
// Create NewAttribute form group
NewAttribute: new FormGroup({
NewAttributeName: new FormControl(),
type: new FormControl()
})
});
}
IsHidden = true;
addNewAttributeButtonClick() {
this.IsHidden = !this.IsHidden;
}
addNewAttributeFormGroup(): FormGroup{
return this.fb.group({
defaultValue:['', Validators.required],
type:['', Validators.required]
});
}
}