Add Angular (#2)

arman-boyakhchyan · DevExpressExampleBot · web-flow · commit f38a121f6aa3 · 2025-07-22T15:43:15.000+04:00
* Add Angular

* README auto update [skip ci]

* Minor CSS update

* Minor CSS update

* Update following feedback

* Minor CSS update

---------

Co-authored-by: DevExpressExampleBot &lt;fake@test.test&gt;
diff --git a/Angular/src/app/app.component.html b/Angular/src/app/app.component.html
@@ -1,3 +1,14 @@
-<div class="default-style">
-  <dx-button [text]="buttonText" (onClick)="onClick($event)"></dx-button>
+<div class="demo-container">
+  <div class="file-uploader-block">
+    <dx-file-uploader
+      id="file-uploader"
+      [multiple]="true"
+      uploadMode="useButtons"
+      [allowCanceling]="true"
+      accept="image/*"
+      labelText="Drop Images Here to Upload..."
+      [maxFileSize]="32000000"
+      dropZone=".file-uploader-block"
+    ></dx-file-uploader>
+  </div>
 </div>
diff --git a/Angular/src/app/app.component.scss b/Angular/src/app/app.component.scss
@@ -1,4 +0,0 @@
-.default-style {
-  margin: 50px;
-  width: 90vw;
-}
diff --git a/Angular/src/app/app.module.ts b/Angular/src/app/app.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { DxButtonModule } from 'devextreme-angular/ui/button';
+import { DxFileUploaderModule } from 'devextreme-angular/ui/file-uploader';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
@@ -11,7 +11,7 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     AppRoutingModule,
-    DxButtonModule,
+    DxFileUploaderModule,
   ],
   providers: [],
   bootstrap: [AppComponent],
diff --git a/Angular/src/index.html b/Angular/src/index.html
@@ -7,7 +7,7 @@
     <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>
diff --git a/Angular/src/styles.scss b/Angular/src/styles.scss
@@ -1 +1,30 @@
-/* You can add global styles to this file, and also import other style files */
+.demo-container {
+    margin: 50px;
+    height: 50vh;
+}
+
+.file-uploader-block {
+    width: 100%;
+    height: 100%;
+    background-color: #f5f5f5;
+    border-radius: 16px;
+}
+
+#file-uploader {
+    height: 100%;
+}
+
+.dx-fileuploader-input-wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.dx-fileuploader-input-container {
+    text-align: center;
+}
+
+#file-uploader .dx-fileuploader-wrapper {
+    overflow-y: auto;
+}
