Update projects

Author: AlisherAmonulloev

Angular/src/app/app.component.html

@@ -1,3 +1,55 @@
-<div class="default-style">
-  <dx-button [text]="buttonText" (onClick)="onClick($event)"></dx-button>
+<div id="app-container">
+  <dx-tab-panel
+    id="tabPanel"
+    [loop]="true"
+    [animationEnabled]="true"
+    [swipeEnabled]="true"
+    [(selectedIndex)]="selectedTabIndex"
+  >
+    <dxi-item title="Employee" icon="floppy">
+      <div *dxTemplate>
+        <dx-form id="form" [formData]="employeeData">
+          <dxi-item dataField="name">
+            <dxo-label template="name"></dxo-label>
+          </dxi-item>
+          <dxi-item dataField="position">
+            <dxo-label template="position"></dxo-label>
+          </dxi-item>
+          <<dxi-item dataField="hireDate"></dxi-item>
+          <dxi-item dataField="officeNumber">
+            <dxo-label template="officeNumber"></dxo-label>
+          </dxi-item>
+          <ng-container *ngFor="let label of labelTemplates">
+            <div *dxTemplate="let data of label.name">
+              <div><i class="dx-icon {{ label.icon }}"></i>{{ data.text }}</div>
+            </div>
+          </ng-container>
+        </dx-form>
+      </div>
+    </dxi-item>
+    <dxi-item title="Notes" icon="comment">
+      <div *dxTemplate>
+        <dx-text-area id="textArea" [(value)]="employeeData.notes">
+        </dx-text-area>
+      </div>
+    </dxi-item>
+    <dxi-item title="Role" icon="isnotblank" badge="new">
+      <div *dxTemplate>
+        <dx-radio-group
+          id="radioGroup"
+          [items]="employeeData.roles"
+          [(value)]="employeeData.roles[0]"
+        >
+        </dx-radio-group>
+      </div>
+    </dxi-item>
+  </dx-tab-panel>
+
+  <dx-radio-group
+    [items]="tabNames"
+    [value]="tabNames[selectedTabIndex]"
+    layout="horizontal"
+    (onValueChanged)="onValueChanged($event)"
+  >
+  </dx-radio-group>
 </div>

Angular/src/app/app.component.scss

@@ -1,4 +1,15 @@
-.default-style {
-  margin: 50px;
-  width: 90vw;
+/* stylelint-disable selector-id-pattern */
+#tabPanel {
+    height: 250px;
+    width: 500px;
+    border: 1px solid;
+}
+
+#form, #radioGroup {
+    padding: 15px;
+}
+
+#textArea {
+    padding: 15px;
+    height: 100%;
 }

Angular/src/app/app.component.ts

@@ -1,20 +1,33 @@
 import { Component } from '@angular/core';
-import { ClickEvent } from 'devextreme/ui/button';
+import { DxRadioGroupTypes } from 'devextreme-angular/ui/radio-group';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
-  title = 'Angular';
+  employeeData = {
+    name: 'John Heart',
+    position: 'CEO',
+    hireDate: new Date(2012, 4, 13),
+    officeNumber: 901,
+    notes:
+      'John has been in the Audio/Video industry since 1990. He has led DevAV as its CEO since 2003.',
+    roles: ['Chief Officer', 'Administrator', 'Manager'],
+  };
 
-  counter = 0;
+  labelTemplates = [
+    { name: 'name', icon: 'dx-icon-info' },
+    { name: 'position', icon: 'dx-icon-group' },
+    { name: 'officeNumber', icon: 'dx-icon-info' },
+  ];
 
-  buttonText = 'Click count: 0';
+  tabNames = ['Employee', 'Notes', 'Role'];
 
-  onClick(e: ClickEvent): void {
-    this.counter++;
-    this.buttonText = `Click count: ${this.counter}`;
+  selectedTabIndex = 0;
+
+  onValueChanged(e: DxRadioGroupTypes.ValueChangedEvent): void {
+    this.selectedTabIndex = this.tabNames.indexOf(e.value);
   }
 }

Angular/src/app/app.module.ts

@@ -1,8 +1,12 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { DxButtonModule } from 'devextreme-angular/ui/button';
-import { AppRoutingModule } from './app-routing.module';
+
+import { DxTabPanelModule } from 'devextreme-angular/ui/tab-panel';
+import { DxFormModule } from 'devextreme-angular/ui/form';
+import { DxTextAreaModule } from 'devextreme-angular/ui/text-area';
+import { DxRadioGroupModule } from 'devextreme-angular/ui/radio-group';
 import { AppComponent } from './app.component';
+import { AppRoutingModule } from './app-routing.module';
 
 @NgModule({
   declarations: [
@@ -11,7 +15,10 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     AppRoutingModule,
-    DxButtonModule,
+    DxTabPanelModule,
+    DxFormModule,
+    DxTextAreaModule,
+    DxRadioGroupModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

Angular/src/app/orig_app.component.css

@@ -2,12 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Angular</title>
+    <title>Getting Started with DevExtreme Angular TabPanel</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
   </head>
-  <body>
+  <body class="dx-viewport">
     <app-root></app-root>
   </body>
 </html>