Cómo exportar datos a archivos de hojas de Excel en Angular

En este tutorial, aprenderemos cómo exportar datos a archivos de hojas de Excel en aplicaciones de Angular 13.

Crear nueva aplicación angular

En primer lugar, abra su terminal y ejecute el siguiente comando para instalar la aplicación angular:

ng new my-new-app

Instale la biblioteca bootstrap y primeng

Luego ejecute el siguiente comando en la terminal para instalar la biblioteca de arranque y la biblioteca de exportación de Excel en la aplicación angular; como sigue:

npm install jquery --save
ng add @ng-bootstrap/ng-bootstrap
npm install primeng --save 
npm install primeicons --save  
npm install @angular/cdk --save 
npm i file-saver npm i xlsx 
npm install primeflex --save

Agregar código en el archivo App.Module.ts

En este paso, visite el directorio src/app y abra el archivo app.module.ts . Y luego agregue las siguientes líneas en el archivo app.module.ts:

...
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TableModule } from 'primeng/table';
import { DropdownModule } from 'primeng/dropdown';
import { ButtonModule } from 'primeng/button';
 
@NgModule({
 ...
  imports: [
   ...
    BrowserAnimationsModule,
    TableModule,
    DropdownModule,
    ButtonModule
  ],
  ...

Agregar código en Ver archivo

En este paso, cree una tabla html con el botón Exportar Excel en la aplicación angular. Por lo tanto, visite src/app/ y app.component.html y actualice el siguiente código:

<p-table [value]="sales">
    <ng-template pTemplate="caption">
        <div class="p-d-flex">
            
            <button type="button" pButton pRipple icon="pi pi-file-excel" (click)="exportExcel()" class="p-button-success p-mr-2"></button>
            
        </div>
    </ng-template>
    <ng-template pTemplate="header">
        <tr>
             
            <th pSortableColumn="brand">Brand <p-sortIcon field="brand"></p-sortIcon></th>
            <th>Last Year Sale</th>
            <th>This Year Sale</th>
            <th>Last Year Profit</th>
            <th>This Year Profit</th>
        </tr>
         
    </ng-template>
    <ng-template pTemplate="body" let-sale>
        <tr>
            <td>{{sale.brand}}</td>
            <td>{{sale.lastYearSale}}</td>
            <td>{{sale.thisYearSale}}</td>
            <td>{{sale.lastYearProfit}}</td>
            <td>{{sale.thisYearProfit}}</td>
        </tr>
    </ng-template>
</p-table>

Agregar código en el archivo ts app.Component

En este paso, visite el directorio src/app y abra app.component.ts . Luego agregue el siguiente código en el archivo component.ts:

...
export class AppComponent {
 ...
  ngOnInit() {
    this.sales = [
      { brand: 'Apple', lastYearSale: '51%', thisYearSale: '40%', lastYearProfit: '$54,406.00', thisYearProfit: '$43,342' },
      { brand: 'Samsung', lastYearSale: '83%', thisYearSale: '96%', lastYearProfit: '$423,132', thisYearProfit: '$312,122' },
      { brand: 'Microsoft', lastYearSale: '38%', thisYearSale: '5%', lastYearProfit: '$12,321', thisYearProfit: '$8,500' },
      { brand: 'Philips', lastYearSale: '49%', thisYearSale: '22%', lastYearProfit: '$745,232', thisYearProfit: '$650,323,' },
      { brand: 'Song', lastYearSale: '17%', thisYearSale: '79%', lastYearProfit: '$643,242', thisYearProfit: '500,332' },
      { brand: 'LG', lastYearSale: '52%', thisYearSale: ' 65%', lastYearProfit: '$421,132', thisYearProfit: '$150,005' },
      { brand: 'Sharp', lastYearSale: '82%', thisYearSale: '12%', lastYearProfit: '$131,211', thisYearProfit: '$100,214' },
      { brand: 'Panasonic', lastYearSale: '44%', thisYearSale: '45%', lastYearProfit: '$66,442', thisYearProfit: '$53,322' },
      { brand: 'HTC', lastYearSale: '90%', thisYearSale: '56%', lastYearProfit: '$765,442', thisYearProfit: '$296,232' },
      { brand: 'Toshiba', lastYearSale: '75%', thisYearSale: '54%', lastYearProfit: '$21,212', thisYearProfit: '$12,533' }
  ];
   
}
 
//excel button click functionality
exportExcel() {
  import("xlsx").then(xlsx => {
      const worksheet = xlsx.utils.json_to_sheet(this.sales); // Sale Data
      const workbook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
      const excelBuffer: any = xlsx.write(workbook, { bookType: 'xlsx', type: 'array' });
      this.saveAsExcelFile(excelBuffer, "sales");
  });
}
saveAsExcelFile(buffer: any, fileName: string): void {
  import("file-saver").then(FileSaver => {
    let EXCEL_TYPE =
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8";
    let EXCEL_EXTENSION = ".xlsx";
    const data: Blob = new Blob([buffer], {
      type: EXCEL_TYPE
    });
    FileSaver.saveAs(
      data,
      fileName + "_export_" + new Date().getTime() + EXCEL_EXTENSION
    );
  });
}
 
}

Inicie la aplicación Angular

En este paso, ejecute el siguiente comando en la terminal para iniciar la aplicación angular:

ng serve

Data Validation in Excel

In this tutorial, let’s discuss what data validation is and how it can be implemented in MS-Excel. Let’s start!!!

What Is Data Validation in Excel?

Data Validation is one of the features in MS-Excel which helps in maintaining the consistency of the data in the spreadsheet. It controls the type of data that can enter in the data validated cells.

Data Validation in MS Excel

Now, let’s have a look at how data validation works and how to implement it in the worksheet:

To apply data validation for the cells, then follow the steps.

1: Choose to which all cells the validation of data should work.

2: Click on the DATA tab.

3: Go to the Data Validation option.

4: Choose the drop down option in it and click on the Data Validation.

Once you click on the data validation menu from the ribbon, a box appears with the list of data validation criteria, Input message and error message.

Let’s first understand, what is an input message and error message?

Once, the user clicks the cell, the input message appears in a small box near the cell.

If the user violates the condition of that particular cell, then the error message pops up in a box in the spreadsheet.

The advantage of both the messages is that the input and as well as the error message guide the user about how to fill the cells. Both the messages are customizable also.

Let us have a look at how to set it up and how it works with a sample

#ms excel tutorials #circle invalid data in excel #clear validation circles in excel #custom data validation in excel #data validation in excel #limitation in data validation in excel #setting up error message in excel #setting up input message in excel #troubleshooting formulas in excel #validate data in excel

Christa Stehr

1598940617

Install Angular - Angular Environment Setup Process

Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.

Installing Node.js and npm
Installing Angular CLI
Creating workspace
Deploying your First App

In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!

Install Angular in Easy Steps

For Installing Angular on your Machine, there are 2 prerequisites:

Node.js
npm Package Manager

Node.js

First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js

Download and Install Node.js version suitable for your machine’s operating system.

Npm Package Manager

Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:

npm -v

Installing Angular CLI

Open Terminal/Command Prompt
To install Angular CLI, run the below command:

npm install -g @angular/cli

· After executing the command, Angular CLI will get installed within some time. You can check it using the following command

ng --version

Workspace Creation

Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:

Using CLI
Using Visual Studio Code

1. Using CLI

To create a workspace:

Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:

Ng new YourAppName

After running this command, it will prompt you to select from various options about the CSS and other functionalities.

To leave everything to default, simply press the Enter or the Return key.

#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli

Iñigo Martínez

1651649280

Cómo exportar datos a archivos de hojas de Excel en Angular

En este tutorial, aprenderemos cómo exportar datos a archivos de hojas de Excel en aplicaciones de Angular 13.

Crear nueva aplicación angular

En primer lugar, abra su terminal y ejecute el siguiente comando para instalar la aplicación angular:

ng new my-new-app

Instale la biblioteca bootstrap y primeng

Luego ejecute el siguiente comando en la terminal para instalar la biblioteca de arranque y la biblioteca de exportación de Excel en la aplicación angular; como sigue:

npm install jquery --save
ng add @ng-bootstrap/ng-bootstrap
npm install primeng --save 
npm install primeicons --save  
npm install @angular/cdk --save 
npm i file-saver npm i xlsx 
npm install primeflex --save

Agregar código en el archivo App.Module.ts

En este paso, visite el directorio src/app y abra el archivo app.module.ts . Y luego agregue las siguientes líneas en el archivo app.module.ts:

...
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TableModule } from 'primeng/table';
import { DropdownModule } from 'primeng/dropdown';
import { ButtonModule } from 'primeng/button';
 
@NgModule({
 ...
  imports: [
   ...
    BrowserAnimationsModule,
    TableModule,
    DropdownModule,
    ButtonModule
  ],
  ...

Agregar código en Ver archivo

En este paso, cree una tabla html con el botón Exportar Excel en la aplicación angular. Por lo tanto, visite src/app/ y app.component.html y actualice el siguiente código:

<p-table [value]="sales">
    <ng-template pTemplate="caption">
        <div class="p-d-flex">
            
            <button type="button" pButton pRipple icon="pi pi-file-excel" (click)="exportExcel()" class="p-button-success p-mr-2"></button>
            
        </div>
    </ng-template>
    <ng-template pTemplate="header">
        <tr>
             
            <th pSortableColumn="brand">Brand <p-sortIcon field="brand"></p-sortIcon></th>
            <th>Last Year Sale</th>
            <th>This Year Sale</th>
            <th>Last Year Profit</th>
            <th>This Year Profit</th>
        </tr>
         
    </ng-template>
    <ng-template pTemplate="body" let-sale>
        <tr>
            <td>{{sale.brand}}</td>
            <td>{{sale.lastYearSale}}</td>
            <td>{{sale.thisYearSale}}</td>
            <td>{{sale.lastYearProfit}}</td>
            <td>{{sale.thisYearProfit}}</td>
        </tr>
    </ng-template>
</p-table>

Agregar código en el archivo ts app.Component

En este paso, visite el directorio src/app y abra app.component.ts . Luego agregue el siguiente código en el archivo component.ts:

...
export class AppComponent {
 ...
  ngOnInit() {
    this.sales = [
      { brand: 'Apple', lastYearSale: '51%', thisYearSale: '40%', lastYearProfit: '$54,406.00', thisYearProfit: '$43,342' },
      { brand: 'Samsung', lastYearSale: '83%', thisYearSale: '96%', lastYearProfit: '$423,132', thisYearProfit: '$312,122' },
      { brand: 'Microsoft', lastYearSale: '38%', thisYearSale: '5%', lastYearProfit: '$12,321', thisYearProfit: '$8,500' },
      { brand: 'Philips', lastYearSale: '49%', thisYearSale: '22%', lastYearProfit: '$745,232', thisYearProfit: '$650,323,' },
      { brand: 'Song', lastYearSale: '17%', thisYearSale: '79%', lastYearProfit: '$643,242', thisYearProfit: '500,332' },
      { brand: 'LG', lastYearSale: '52%', thisYearSale: ' 65%', lastYearProfit: '$421,132', thisYearProfit: '$150,005' },
      { brand: 'Sharp', lastYearSale: '82%', thisYearSale: '12%', lastYearProfit: '$131,211', thisYearProfit: '$100,214' },
      { brand: 'Panasonic', lastYearSale: '44%', thisYearSale: '45%', lastYearProfit: '$66,442', thisYearProfit: '$53,322' },
      { brand: 'HTC', lastYearSale: '90%', thisYearSale: '56%', lastYearProfit: '$765,442', thisYearProfit: '$296,232' },
      { brand: 'Toshiba', lastYearSale: '75%', thisYearSale: '54%', lastYearProfit: '$21,212', thisYearProfit: '$12,533' }
  ];
   
}
 
//excel button click functionality
exportExcel() {
  import("xlsx").then(xlsx => {
      const worksheet = xlsx.utils.json_to_sheet(this.sales); // Sale Data
      const workbook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
      const excelBuffer: any = xlsx.write(workbook, { bookType: 'xlsx', type: 'array' });
      this.saveAsExcelFile(excelBuffer, "sales");
  });
}
saveAsExcelFile(buffer: any, fileName: string): void {
  import("file-saver").then(FileSaver => {
    let EXCEL_TYPE =
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8";
    let EXCEL_EXTENSION = ".xlsx";
    const data: Blob = new Blob([buffer], {
      type: EXCEL_TYPE
    });
    FileSaver.saveAs(
      data,
      fileName + "_export_" + new Date().getTime() + EXCEL_EXTENSION
    );
  });
}
 
}

Inicie la aplicación Angular

En este paso, ejecute el siguiente comando en la terminal para iniciar la aplicación angular:

ng serve

Roberta Ward

1593184320

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular.

Angular is a Typescript-based open-source front-end web application platform. The Angular Team at Google and a community of individuals and corporations lead it. Angular lets you extend HTML’s syntax to express your apps’ components clearly. The angular resolves challenges while developing a single page and cross-platform applications. So, here the meaning of the single-page applications in angular is that the index.html file serves the app. And, the index.html file links other files to it.

We build angular applications with basic concepts which are NgModules. It provides a compilation context for components. At the beginning of an angular project, the command-line interface provides a built-in component which is the root component. But, NgModule can add a number of additional components. These can be created through a template or loaded from a router. This is what a compilation context about.

What is a Component in Angular?

Components are key features in Angular. It controls a patch of the screen called a view. A couple of components that we create on our own helps to build a whole application. In the end, the root component or the app component holds our entire application. The component has its business logic that it does to support the view inside the class. The class interacts with the view through an API of properties and methods. All the components added by us in the application are not linked to the index.html. But, they link to the app.component.html through the selectors. A component can be a component and not only a typescript class by adding a decorator @Component. Then, for further access, a class can import it. The decorator contains some metadata like selector, template, and style. Here’s an example of how a component decorator looks like:

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.scss']
})

Role of App Module

Modules are the package of functionalities of our app. It gives Angular the information about which features does my app has and what feature it uses. It is an empty Typescript class, but we transform it by adding a decorator @NgModule. So, we have four properties that we set up on the object pass to @NgModule. The four properties are declarations, imports, providers, and bootstrap. All the built-in new components add up to the declarations array in @NgModule.

@NgModule({
declarations: [
  AppComponent,
],
imports: [
  BrowserModule,
  HttpClientModule,
  AppRoutingModule,
  FormsModule
],
bootstrap: [AppComponent]
})

What is Data Binding?

Data Binding is the communication between the Typescript code of the component and the template. So, we have different kinds of data binding given below:

When there is a requirement to output data from our Typescript code in the HTML template. String interpolation handles this purpose like {{data}} in HTML file. Property Binding is also used for this purpose like [property] = “data”.
When we want to trigger any event like clicking a button. Event Binding works while we react to user events like (event) = “expression”.
When we can react to user events and output something at the same time. Two-way Binding is used like [(ngModel)] = “data”.

image for understanding data binding

#angular #javascript #tech blogs #user interface (ui) #angular #angular fundamentals #angular tutorial #basics of angular

brendan williams

1614150601

Herramienta de recuperación EDB para recuperar archivos EDB de Exchange corruptos

Todos los datos de Exchange Server, como correos electrónicos, contactos, notas, eventos, calendario, etc. se almacenan en el archivo Exchange EDB. A veces, el archivo EDB se vuelve inaccesible debido a la corrupción o daños en el archivo EDB. La corrupción del archivo EDB puede deberse a varias razones, como: B. grandes cantidades de datos, ataques de virus, problemas de red, etc. En este caso, los usuarios no pueden acceder a sus datos a través de archivos EDB dañados. Debido a esto, es necesario restaurar los elementos del buzón de un archivo EDB dañado. Pero, ¿cómo recuperar elementos de buzón dañados para archivos EDB? La respuesta a esa pregunta se encuentra en este blog. Así que sigamos con esta publicación para obtener una solución inmediata para la recuperación de elementos del buzón de Exchange.

¿Conoce el archivo EDB

El archivo Exchange EDB almacena datos en forma de archivos de base de datos:

Priv1.edb y Pub1.edb

La corrupción puede ocurrir en cualquier archivo EDB. Aquí le ofrecemos una solución para la recuperación de datos de estos dos archivos EDB.

Antes de eso, aclaremos las razones detrás de la corrupción en el archivo EDB, que discutiremos en la siguiente sección de este blog.

Razones detrás de la corrupción de archivos EDB

Estas son las principales razones detrás de la corrupción de archivos EDB.

• Un problema de sincronización con Exchange Server puede dañar el archivo EDB.
• El antivirus instalado en el servidor ha eliminado el archivo de registro.
• Almacenamiento excesivo en Exchange Server.
• Error al proporcionar datos del archivo EDB por Exchange Server.
• Los problemas de hardware o de red pueden dañar el archivo EDB.

Una solución inteligente para restaurar archivos EDB de Exchange

Hay varias formas manuales, como la utilidad Eseutil e Isinteg de Exchange Server, para restaurar la base de datos de Exchange Server. Sin embargo, estos métodos son complicados y es más probable que fallen. En esta situación, se recomienda utilizar otra solución inteligente y eficaz como la herramienta de terceros EDB Recovery. Esta es una de las soluciones más fáciles para restaurar todos los elementos como correo electrónico, contactos, notas, calendario, etc. desde el buzón de Exchange. El software soluciona rápidamente los problemas del archivo EDB y ayuda a los usuarios a obtener todos los elementos del buzón del archivo EDB dañado. Se necesitan unos minutos para reparar los elementos del archivo EDB y le permite exportar los datos recuperados a varios formatos de archivo como PST, EML, MSG, HTML, etc.

Siga los pasos para usar el software de recuperación de EDB para recuperar elementos de buzón de correo corruptos para archivos EDB.

Descargue e inicie el Datavare software de recuperación EDB.
Agregue el archivo EDB usando la opción Examinar.
Seleccione la opción para guardar los datos después de la recuperación.
Seleccione la ubicación del archivo de salida y haga clic en Siguiente.
Guarde el informe de recuperación de archivos EDB y haga clic en Finalizar.

Líneas de cierre

Mit dieser Software, d. H. Der oben beschriebenen EDB-Wiederherstellung, können Benutzer alle beschädigten EDB-Dateien reibungslos reparieren und wiederherstellen. Benutzer haben keine Probleme beim Bedienen der Software. Benutzer können Exchange EDB-Dateien mithilfe der Software in PST und verschiedenen anderen Formaten wiederherstellen und speichern. Durch Herunterladen der Testversion können Benutzer die Funktionen und die Arbeitsgeschwindigkeit der Software überprüfen, indem sie die ersten 50 Elemente pro Ordner wiederherstellen. Wenden Sie sich bei Unklarheiten rund um die Uhr an unser technisches Personal.

Más información:- https://www.datavare.com/software/edb-recovery.html

#herramienta de recuperación de edb #recuperación de adobe #recuperar archivos edb de intercambio corruptos #recuperar archivos edb

Cómo exportar datos a archivos de hojas de Excel en Angular

Crear nueva aplicación angular

Instale la biblioteca bootstrap y primeng

Agregar código en el archivo App.Module.ts

Agregar código en Ver archivo

Agregar código en el archivo ts app.Component

Inicie la aplicación Angular

What is GEEK

Buddha Community

Data Validation in Excel

Data Validation in Excel

What Is Data Validation in Excel?

Data Validation in MS Excel

Install Angular - Angular Environment Setup Process

Install Angular in Easy Steps

Node.js

Npm Package Manager

Installing Angular CLI

Workspace Creation

1. Using CLI

Cómo exportar datos a archivos de hojas de Excel en Angular

Crear nueva aplicación angular

Instale la biblioteca bootstrap y primeng

Agregar código en el archivo App.Module.ts

Agregar código en Ver archivo

Agregar código en el archivo ts app.Component

Inicie la aplicación Angular

Basics of Angular: Part-1

What is a Component in Angular?

Role of App Module

What is Data Binding?

Herramienta de recuperación EDB para recuperar archivos EDB de Exchange corruptos

¿Conoce el archivo EDB

Razones detrás de la corrupción de archivos EDB

Una solución inteligente para restaurar archivos EDB de Exchange

Líneas de cierre