Update projects

Author: AlisherAmonulloev

Angular/orig_.gitignore

@@ -1,3 +1,14 @@
-<div class="default-style">
-  <dx-button [text]="buttonText" (onClick)="onClick($event)"></dx-button>
+<div id="app-container">
+  <dx-drop-down-button
+    text="Sandra Johnson"
+    icon="user"
+    [items]="actions"
+    keyExpr="id"
+    displayExpr="text"
+    (onItemClick)="onItemClick($event)"
+    [splitButton]="true"
+    (onButtonClick)="onButtonClick()"
+    [dropDownOptions]="dropDownOptions"
+  >
+  </dx-drop-down-button>
 </div>

Angular/orig_package.json

@@ -1,4 +1,5 @@
-.default-style {
-  margin: 50px;
-  width: 90vw;
+#app-container {
+  width: 900px;
+  position: relative;
+  padding: 50px;
 }

Angular/src/app/app.component.html

@@ -1,20 +1,30 @@
 import { Component } from '@angular/core';
-import { ClickEvent } from 'devextreme/ui/button';
+import notify from 'devextreme/ui/notify';
+import { DxDropDownButtonTypes } from 'devextreme-angular/ui/drop-down-button';
+import { Action, DropDownOptions } from './app.types';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
-  title = 'Angular';
+  actions: Action[] = [
+    { id: 1, text: 'My profile', icon: 'user' },
+    { id: 2, text: 'Messages', icon: 'email' },
+    { id: 3, text: 'Contacts', icon: 'group' },
+    { id: 4, text: 'Log out', icon: 'runner' },
+  ];
 
-  counter = 0;
+  dropDownOptions: DropDownOptions = {
+    height: 150,
+  };
 
-  buttonText = 'Click count: 0';
+  onItemClick(e: DxDropDownButtonTypes.ItemClickEvent): void {
+    notify(`${e.itemData.text} was clicked`, 'info', 2000);
+  }
 
-  onClick(e: ClickEvent): void {
-    this.counter++;
-    this.buttonText = `Click count: ${this.counter}`;
+  onButtonClick(): void {
+    notify('Main button was clicked', 'success', 2000);
   }
 }

Angular/src/app/app.component.scss

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { DxButtonModule } from 'devextreme-angular/ui/button';
+import { DxDropDownButtonModule } from 'devextreme-angular/ui/drop-down-button';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
@@ -11,7 +11,7 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     AppRoutingModule,
-    DxButtonModule,
+    DxDropDownButtonModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

Angular/src/app/app.component.ts

@@ -0,0 +1,9 @@
+export interface Action {
+  id: number;
+  text: string;
+  icon: string;
+}
+
+export interface DropDownOptions {
+  height: number;
+}