How to send and receive data through azure sql database?

Question

Angular

I am writing a term paper using angular cli, the topic of the term paper is "website for crowdfunding campaigns". The user has a personal page on which he manages the list of his campaigns (a table with the ability to create / delete / edit a campaign / open in read mode), fields with information about the user. Each campaign consists of: a title, a short description, an image gallery, and an end date. The main page displays: the latest updated campaigns, campaigns with the highest ratings.

Here's what the code looks like:
1. User information fields:

<div id="page" class="container-fluid">
<div formGroupName="address">
  
    <label>
      First Name:
      <input type="text" formControlName="firstName">
    </label>
  
    <label>
      Last Name:
      <input type="text" formControlName="lastName">
    </label>

  <h3>Address</h3>

  <label>
    Street:
    <input type="text" formControlName="street">
  </label>

  <label>
    City:
    <input type="text" formControlName="city">
  </label>
  
  <label>
    State:
    <input type="text" formControlName="state">
  </label>

  <label>
    Zip Code:
    <input type="text" formControlName="zip">
  </label>

  <button type="save" [disabled]="!profileForm.valid">Save</button>
</div>
</div>

2. Campaign:

<div id="page" class="container-fluid">
  <div *ngFor="let product of products">
    <div formGroupName="company">
      <h3>Company creation</h3>

      <form [formGroup]="profileForm">      
        <label>
          Company Name:
          <input type="text" formControlName="companyName">
        </label>  
        
        <!--Описание-->
        <div *ngFor="let product of products">        
          <p *ngIf="product.description">
            {{ product.description }}
          </p>
        </div>
        
        <!--img-->
        <!--a draggable element-->
        <div [dndDraggable]="draggable.data"
        [dndEffectAllowed]="draggable.effectAllowed"
        [dndDisableIf]="draggable.disable"
        (dndStart)="onDragStart($event)"
        (dndCopied)="onDraggableCopied($event)"
        (dndLinked)="onDraggableLinked($event)"
        (dndMoved)="onDraggableMoved($event)"
        (dndCanceled)="onDragCanceled($event)"
        (dndEnd)="onDragEnd($event)">
        
        <div *ngIf="draggable.handle"dndHandle>
          HANDLE
        </div>
        draggable ({{draggable.effectAllowed}}) <span [hidden]="!draggable.disable">DISABLED</span>
        <div dndDragImageRef>DRAG_IMAGE</div>
      </div>
      
      <section dndDropzone
      (dndDragover)="onDragover($event)"
      (dndDrop)="onDrop($event)">
      
      dropzone 
      
      <div style="border: 1px orangered solid; border-radius: 5px; padding: 15px;"dndPlaceholderRef>
        placeholder
      </div>
    </section>
  </form>
</div>

<button type="save" [disabled]="!profileForm.valid">Save</button>
</div>
</div>

How can I save it to the database?

And how to display here:
3. Main:

<table class="table table-striped">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col" sortable="name" (sort)="onSort($event)">Company</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let сompany of companies">
        <td>
          <img>
          {{ сompany.name }}
        </td>
      </tr>
    </tbody>
  </table>
  
  <br/>
  
  <table class="table table-striped">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col" sortable="name" (sort)="onSort($event)">Company</th>
        <th scope="col" sortable="area" (sort)="onSort($event)">Rating</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let сompany of companies">
        <td>
          <img>
          {{ сompany.name }}
        </td>
        <td>{{ сompany.rating }}</td>
      </tr>
    </tbody>
  </table>

4. When opening a campaign in read mode:

<div id="page" class="container-fluid"> 
    <ng-template #longContent let-modal>
      <ngb-carousel *ngIf="images">
        <ng-template ngbSlide>
          <div class="picsum-img-wrapper">
            <img [src]="images[0]" alt="Random first slide">
          </div>
          <div class="carousel-caption">
            <h3>First slide label</h3>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
          </div>
        </ng-template>
        <ng-template ngbSlide>
          <div class="picsum-img-wrapper">
            <img [src]="images[1]" alt="Random second slide">
          </div>
          <div class="carousel-caption">
            <h3>Second slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </ng-template>
        <ng-template ngbSlide>
          <div class="picsum-img-wrapper">
            <img [src]="images[2]" alt="Random third slide">
          </div>
          <div class="carousel-caption">
            <h3>Third slide label</h3>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
          </div>
        </ng-template>
      </ngb-carousel>
    </ng-template>

    <!--name company-->

    <p>NgModel and reactive forms can be used without the 'rate' binding</p>
    
    <div class="form-group">
      <ngb-rating [formControl]="ctrl"></ngb-rating>
      <div class="form-text small">
        <div *ngIf="ctrl.valid" class="text-success">Thanks!</div>
        <div *ngIf="ctrl.invalid" class="text-danger">Please rate us</div>
      </div>
    </div>
    
    <hr>
    
    <pre>Model: <b>{{ ctrl.value }}</b></pre>
    <button class="btn btn-sm btn-outline-{{ ctrl.disabled ? 'danger' : 'success'}} mr-2" (click)="toggle()">
      {{ ctrl.disabled ? "control disabled" : " control enabled" }}
    </button>
    <button class="btn btn-sm btn-outline-primary mr-2" (click)="ctrl.setValue(null)">Clear</button>

    <!--opisanie-->
</div>

5. User's personal page:

<div id="page" class="container-fluid">
      <div>
        <!--Ссылка на настройки профиля-->

        <div class="card mb-3" style="max-width: 540px;">
          <div class="row no-gutters">
            <div class="col-md-4">
              <img src="..." class="card-img" alt="...">
            </div>
            <div class="col-md-8">
              <div class="card-body">
                <h5 class="card-title">Name Company</h5>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <a href="#" class="btn btn-primary" i18n>Переход куда-нибудь</a>
              </div>
            </div>
          </div>
        </div>
        
          <div class="container">
            <div class="row">
              <div class="col">
                Latest updater companies
                <table class="table table-bordered">
                    <thead>
                      <tr>
                        <th scope="col">#</th>
                        <th scope="col">Companies</th>
                        <th scope="col">Creare</th>
                        <th scope="col">Remove</th>
                        <th scope="col">Edit</th>
                        <th scope="col">Reading</th>
                      </tr>
                    </thead>
                    <tbody *ngFor="let x of data">
                      <tr *ngFor="let company of companies">
                        <th scope="row">1</th>
                        <th>
                          <a [title]="company.name + ' details'" [routerLink]="['/companies', companyId]">
                            {{ company.name }}
                          </a>
                        </th>
                      </tr>
                      <tr>
                        <td>
                          <td>
                            <button type="creare" [disabled]="!profileForm.valid">Creare</button>
                          </td>
                        </td>

                        <td>
                          <button type="remove" [disabled]="!profileForm.valid">Remove</button>
                        </td>

                        <td>
                          <button type="edit" [disabled]="!profileForm.valid">Edit</button>
                        </td>

                        <td>
                          <button type="reading" [disabled]="!profileForm.valid">Reading</button>
                        </td>
                      </tr>
                    </tbody>
                  </table>
              </div>
            </div>
          </div>        
        </div>
      </div>
</div>

Thanks in advance, and if you find an error in the code, please point it out.

Answer 1

1 - use spoilers for large code
2 - you have only markup here. and you need to create logic from 0???