Importacion de todos los modulos de Material

Para instalar angular material:

npm install --save @angular/material @angular/cdk
ng add @angular/material

Para no tener que importar todos los modulos material en cada pagina que se utilicen, se puede crear un modulo que tenga todas las definiciones y luego importar solamente ese:

1. Crear un archivo llamado material.module.ts y agregarle esto:

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import {MatCheckboxModule} from '@angular/material/checkbox';

import {MatButtonModule} from '@angular/material/button';

import {MatInputModule} from '@angular/material/input';

import {MatAutocompleteModule} from '@angular/material/autocomplete';

import {MatDatepickerModule} from '@angular/material/datepicker';

import {MatFormFieldModule} from '@angular/material/form-field';

import {MatNativeDateModule, MAT_DATE_LOCALE} from '@angular/material/core';

import {MatRadioModule} from '@angular/material/radio';

import {MatSelectModule} from '@angular/material/select';

import {MatSliderModule} from '@angular/material/slider';

import {MatSlideToggleModule} from '@angular/material/slide-toggle';

import {MatMenuModule} from '@angular/material/menu';

import {MatSidenavModule} from '@angular/material/sidenav';

import {MatToolbarModule} from '@angular/material/toolbar';

import {MatListModule} from '@angular/material/list';

import {MatGridListModule} from '@angular/material/grid-list';

import {MatCardModule} from '@angular/material/card';

import {MatStepperModule} from '@angular/material/stepper';

import {MatTabsModule} from '@angular/material/tabs';

import {MatExpansionModule} from '@angular/material/expansion';

import {MatButtonToggleModule} from '@angular/material/button-toggle';

import {MatChipsModule} from '@angular/material/chips';

import {MatIconModule} from '@angular/material/icon';

import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';

import {MatProgressBarModule} from '@angular/material/progress-bar';

import {MatDialogModule} from '@angular/material/dialog';

import {MatTooltipModule} from '@angular/material/tooltip';

import {MatSnackBarModule} from '@angular/material/snack-bar';

import {MatTableModule} from '@angular/material/table';

import {MatSortModule} from '@angular/material/sort';

import {MatPaginatorModule} from '@angular/material/paginator';

@NgModule({

  declarations: [],

  imports: [

    CommonModule,

    MatCheckboxModule,

    MatCheckboxModule,

    MatButtonModule,

    MatInputModule,

    MatAutocompleteModule,

    MatDatepickerModule,

    MatNativeDateModule,

    MatFormFieldModule,

    MatRadioModule,

    MatSelectModule,

    MatSliderModule,

    MatSlideToggleModule,

    MatMenuModule,

    MatSidenavModule,

    MatToolbarModule,

    MatListModule,

    MatGridListModule,

    MatCardModule,

    MatStepperModule,

    MatTabsModule,

    MatExpansionModule,

    MatButtonToggleModule,

    MatChipsModule,

    MatIconModule,

    MatProgressSpinnerModule,

    MatProgressBarModule,

    MatDialogModule,

    MatTooltipModule,

    MatSnackBarModule,

    MatTableModule,

    MatSortModule,

    MatPaginatorModule

  ],

  exports: [

    MatCheckboxModule,

    MatCheckboxModule,

    MatButtonModule,

    MatInputModule,

    MatAutocompleteModule,

    MatDatepickerModule,

    MatNativeDateModule,

    MatFormFieldModule,

    MatRadioModule,

    MatSelectModule,

    MatSliderModule,

    MatSlideToggleModule,

    MatMenuModule,

    MatSidenavModule,

    MatToolbarModule,

    MatListModule,

    MatGridListModule,

    MatCardModule,

    MatStepperModule,

    MatTabsModule,

    MatExpansionModule,

    MatButtonToggleModule,

    MatChipsModule,

    MatIconModule,

    MatProgressSpinnerModule,

    MatProgressBarModule,

    MatDialogModule,

    MatTooltipModule,

    MatSnackBarModule,

    MatTableModule,

    MatSortModule,

    MatPaginatorModule

  ],

  providers: [

    {provide: MAT_DATE_LOCALE, useValue: 'es-ES'},

  ],

})

export class MaterialModule { }

2. Para la pagina en la que se quiere utilizar material, en el archivo module (ej, home.module.ts) agregar:

import { MaterialModule } from '../_material/material.module';

y en imports:

MaterialModule

3. En home.page.html, agregar algo para testearlo:

<ion-content padding>

    <div style="text-align: center;">

        <mat-button-toggle-group name="fontStyle" aria-label="Font Style" class="example-full-width">

          <mat-button-toggle color="primary" value="opcion1">Opcion1</mat-button-toggle>

          <mat-button-toggle color="primary" value="opcion2">Opcion2</mat-button-toggle>    

        </mat-button-toggle-group>        

    </div>

    

    <div style="text-align: center;">

      <mat-form-field class="example-full-width">

        <input matInput placeholder="Nombre y apellido">

      </mat-form-field>  

    </div>

  

    <div style="text-align: center;">

      <mat-form-field class="example-full-width">

        <input matInput placeholder="Email">

      </mat-form-field>  

    </div>    

</ion-content>

Comprimir videos para whatsapp

App:
Smart Video Compressor and Resizer

Quitar fondo en imagenes complejas

1. Elegir pen tool\
2. Hacer click cada cierto tramo alrededor de la imagen
3. Luego de unir el punto final con el origen, hacer ctrl+z
4. Click derecho / make selection
5. Elegir el lazo
6. Click derecho / Layer via copy

Remover borde externo de imagenes recortadas con Photoshop CS6

agregar layer negro
rasterizar la imagen, y colocarla en el layer encima del fondo negro
select / all
click en rectangle marquee tool
click derecho / free transform
mover un poco la imagen
ctrl enter
select / modify / contract
1px
select / inverse
delete
ctrl+d

TypeError ionic firebase

npm install rxjs@6 rxjs-compat@6 --save

Subir archivos con Angular y WebApi

app.component.html

<form [formGroup]="form" (ngSubmit)="onSubmit()" class="form-horizontal form-control-sm">
  <div class="form-row">
    <label for="nombre" class="col-sm-1 control-label form-control-sm text-right">Nombre</label>
    <div class="col-sm-1">
      <input class="form-control form-control-sm" formControlName="nombre">
    </div>
  </div>

  <div class="form-row mb-2">
    <label for="foto" class="col-sm-1 control-label form-control-sm text-right">Foto</label>
    <div class="col-sm-3">
      <img src="./assets/noimage.png" id="previewFoto" name="previewFoto" style="width: 150px; height: 150px;cursor: pointer" onClick="document.getElementById('foto').click();"
      />
    </div>
    <input class="form-control form-control-sm" id="foto" type="file" accept=".xlsx" (change)="upload($event)"
      #fileInput style="display: none">
  </div>

  <input type="submit" value="Guardar" [disabled]="!form.valid" class="btn btn-primary col-sm-1">
</form>


app.component.ts

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from "@angular/forms";
import { DatosService } from './_servicios/datos.service';
import { Datos } from './_modelos/datos';
import { CustomResponse } from './_modelos/custom-response';
import { ResponseMessageCode } from './_servicios/enumerados';
//import { Archivo } from './_modelos/archivo';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  datos = new Datos();
  form: FormGroup;

  constructor(private fb: FormBuilder, private data : DatosService) {
    this.createForm();
  }

  createForm() {
    this.form = this.fb.group({     
  nombre: [''],
      foto: ['']
    });
  }

  upload(event) {
    this.onFileChange(event);
  }

  onFileChange(event) {
    if (event.target.files.length > 0) {
      let archivoSeleccionado = event.target.files[0];

      let reader = new FileReader();
      reader.readAsDataURL(archivoSeleccionado);
      let _this = this;

      reader.onloadend = function () {
        _this.form.patchValue({
          foto: (<string>reader.result).split('base64,')[1]
        });
      }
    }
  }

  onSubmit() {       
    this.datos.nombre = this.form.get('nombre').value;

    if (this.datos.contenido != 'undefined') {
      this.datos.contenido = this.form.get('foto').value;
    }

    this.data.guardar(this.datos).subscribe(
      (response: CustomResponse<any>) => {
        if (response.messageCode == ResponseMessageCode.OK) {
          console.log("todo ok");
        } else {
          console.log("mal");     
        }
      }
    );
  }

  ngOnInit() {
  }
}


app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'home', component: AppComponent }
]

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }



datos.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class DatosService {
  constructor(public http: HttpClient) { }

  public guardar(datos): Observable<any> {
    return this.http.post<any>("http://localhost/servicios/api/creditos/subirarchivo", datos);
  }
}

custom-response.ts

export class CustomResponse<T> {
   messageCode: number;
   message: string;
   data: T;
}

datos.ts

export class Datos {
    nombre: string;
    contenido: string;
}


WebApi C#

[AllowAnonymous]
[OverrideAuthentication]
[HttpPost]
public IHttpActionResult SubirArchivo(Arch datos)
{
var path = System.Web.HttpContext.Current.Server.MapPath("~") + @"\xls\archivo.xlsx";
if (File.Exists(path))
File.Delete(path);

File.WriteAllBytes(path, datos.Contenido);

var mensaje = new { error = false, mensaje = "" };

return this.Ok(mensaje);
}

public class Arch
{
    [JsonProperty("nombre")]
    public string Nombre { get; set; }
    [JsonProperty("contenido")]
    public byte[] Contenido { get; set; }
}

no se puede cargar el archivo o ensamblado Microsoft.AI.Web...

Opcion 1:

Eliminar el contenido de la carpeta que se llame igual que el sitio que esta dando el problema, en esta carpeta (ej, si fuera el sitio creditos):

C:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\creditos


Opción 2:

Instalar con NuGet:

Microsoft.ApplicationInsights (version 2.7.2)

y

Microsoft.ApplicationInsights.Web (version 2.7.2)

Este ultimo es el que contiene el archivo que resuelve el error: Microsoft.AI.Web.dll

Crear un paquete custom con NuGet

Ejemplo: crear un paquete para prueba.dll

mkdir c:\temp\prueba
mkdir c:\temp\prueba\lib
mkdir c:\temp\prueba\lib\net45

copy prueba.dll c:\temp\prueba\lib\net45

nuget spec prueba
nuget pack prueba.nuspec


<?xml version="1.0"?>
<package >
  <metadata>
    <id>prueba</id>
    <version>1.0.0</version>
    <authors>carusso</authors>
    <owners>carusso</owners>
    <requireLicenseAcceptance>false</requireLicenseAcceptance>
    <description>prueba</description>
    <releaseNotes></releaseNotes>
    <copyright></copyright>
    <tags></tags>
    <dependencies>
      <dependency id="SampleDependency" version="1.0" />
    </dependencies>
  </metadata>
</package>

Firebase Ionic Angular

ionic start ejemplo1 blank --type=angular
cd ejemplo1
npm install angularfire2 firebase

crear un archivo credentials.ts y agregarle el codigo que aparece en la consola de firebase:
(en la ruedita de configuracion, al lado del texto "Descripcion general..." luego en el icono </>)

export var firebaseConfig = {
    apiKey: "AIzaSyA1LFnrg7kJ7bevnFIVcNDIxxxxxxxxxxxxxx",
    authDomain: "prueba2-b3344.xxxxxxxxxxxxxxxx.com",
    databaseURL: "https://prxxxxxxxxxxx44.fxxxxxxxxxxxxxxxxeio.com",
    projectId: "pruexxxxxxxxxxxxxxxxx",
    storageBucket: "pxxxxxxxxxxxxxxxxx.com",
    messagingSenderId: "398794336943"
};


app.module.ts:

import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { AngularFireStorageModule } from 'angularfire2/storage';
import { firebaseConfig } from './credentials';

  imports: [
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFirestoreModule,
    AngularFireStorageModule
  ],

Crear una interfaz competidor.ts:

export class Competidor {
    id: string;
    numero: number;
    nombre: string;
    apellido: string;
}

Crear un servicio:

ng generate service firestore-service

firestore-service.ts

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Competidor } from '../_modelos/competidor';

@Injectable({
  providedIn: 'root'
})

export class FirestoreServiceService {
  constructor(public firestore: AngularFirestore) {}

  buscarCompetidor(id: string): AngularFirestoreDocument<Competidor> {
    return this.firestore.collection(`competidores`).doc(id);
  }

  actualizarCompetidor(comp: Competidor): Promise<void> {
    return this.firestore.doc(`competidores/${comp.id}`).update({       
      numero: comp.numero,
      nombre: comp.nombre,
      apellido: comp.apellido
    }); 
  }

  guardarCompetidor(comp: Competidor): Promise<void> {
      const id = this.firestore.createId(); 

      return this.firestore.doc(`competidores/${id}`).set({
        id: id,
        numero: comp.numero,
        nombre1: comp.nombre,
        apellido1: comp.apellido
      }); 
  }

  listaCompetidores(): AngularFirestoreCollection<Competidor> {
    return this.firestore.collection(`competidores`); 
  }
}

Guardar y recuperar imagenes

competidor.component.html

      <div>
        <img src="./assets/noimage.png" id="previewFoto" name="previewFoto" style="width: 150px; height: 150px;cursor: pointer" onClick="document.getElementById('foto').click();" />
      </div>
<input class="form-control form-control-sm" id="foto" type="file" accept=".png,.jpg,.jpeg" (change)="upload($event)"
          #fileInput style="display: none">

competidor.component.ts
import { FirestoreServiceService } from '../../../_servicios/firestore-service.service';
import { AngularFireStorage } from 'angularfire2/storage';


  constructor(private http: Http, private fb: FormBuilder, private route: ActivatedRoute,
              private router: Router, private data : CompetidoresService, private fbservice: FirestoreServiceService,
              private storage: AngularFireStorage) {
    let id = null;

    this.createForm();

    this.route.params.subscribe(params => {         
      id = params["id"];   
    });     

   this.form.patchValue({id: id});

    if (id != 0)
    {   
      this.fbservice.buscarCompetidor(id).valueChanges().subscribe((datos) => {
        let competidor = datos;
                   
        this.form.patchValue({
          id: competidor.id,
          numero: competidor.numero,
          nombre: competidor.nombre,
          apellido: competidor.apellido
          foto: competidor.foto
        });

        document["previewFoto"].src = competidor.foto;   
      });     
    }
  }


  upload(event) {
    this.fotoAux = event.target.files[0];

    if (event.target.files.length > 0) {
      let file = event.target.files[0];

      var preview = document.querySelector('img');   
      var reader  = new FileReader();
 
      reader.onloadend = function () {     
        preview.src = reader.result.toString();
      }
 
      if (file) {
        reader.readAsDataURL(file);
      } else {
        preview.src = "";
      }
    }
  }

onSubmit() {
         let idImagen = this.form.get("nombre1").value + "_" + this.form.get("apellido1").value;
         this.storage.upload(`/mko/imagenes/${idImagen}`, this.fotoAux);

         let downloadURL =       
                  this.storage.ref(`/mko/imagenes/${idImagen}`).getDownloadURL().subscribe(d => {

         this.form.patchValue({foto: d}); 
         comp.foto = this.form.get("foto").value;

          this.fbservice.buscarCompetidor(comp.id).valueChanges().subscribe(d => {
          if (!d) {   
             this.fbservice.guardarCompetidor(comp).then(() => {
             this.router.navigate(['/competidores/lista']);
           });
         } else
        {
           this.fbservice.actualizarCompetidor(comp).then(() => {
           this.router.navigate(['/competidores/lista']);
        });
     }   
   });
  });
}

Slideshow con Adobe Premiere Pro CC 2015

1. Crear secuencia

New project / File / New Sequence
HDV / HDV 1080p25

2. Importar carpeta de fotos

File / Import

3. Set default transition

Efectos / Transiciones de video / Elegir una, y luego click derecho y set default transition

4. Automatizar la secuencia

Bajar archivo desde WebApi con Angular 6

WebApi:

[HttpGet]
public HttpResponseMessage GenExcel()
{
var rutaExcelTemp = @"C:\path_del_sitio_web\Xls\TasaMedia.xlsx";

var nombreArchivoGenerado = "TasaMedia_" + DateTime.Now.Day + "_" + DateTime.Now.Month + "_" + DateTime.Now.Year + "_" + DateTime.Now.Hour + DateTime.Now.Minute + DateTime.Now.Second + DateTime.Now.Millisecond + ".xlsx";//nombre del nuevo archivo

var reportStream = new StreamContent(File.Open(rutaExcelTemp, FileMode.Open, FileAccess.Read));

var result = Request.CreateResponse(HttpStatusCode.OK);

result.Content = reportStream;

result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/force-download");
result.Content.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition");
result.Content.Headers.ContentDisposition =
new ContentDispositionHeaderValue("attachment")
{
FileName = Path.GetFileName(nombreArchivoGenerado)
};
return result;     
}

Angular:

  import { Observable } from 'rxjs';
  import { HttpClient } from "@angular/common/http";

  downloadFile(url: string) {
    return this.http.get('http://localhost' + url', {
      responseType: 'blob', observe: 'response'
    }).subscribe(res => {
      let contentDisposition = res.headers.get('Content-Disposition');
      var result = contentDisposition.split(';')[1].trim().split('=')[1];
      let archivo = result.replace(/"/g, '');

      console.log('start download:', res);
      var url = window.URL.createObjectURL(res.body);
      var a = document.createElement('a');
      document.body.appendChild(a);
      a.setAttribute('style', 'display: none');
      a.href = url;
      a.download = archivo; //res.filename;
      a.click();
      window.URL.revokeObjectURL(url);
      a.remove(); // remove the element
    }, error => {
      console.log('download error:', JSON.stringify(error));
    }, () => {
      console.log('Completed file download.')
    });
  }

error al abrir dispositivo de sonido audacity

Detener e iniciar el servicio Audio de Windows
Reiniciar audacity

Actualizacion a Angular 6 desde 5.2

1. npm install -g @angular/cli
2. npm i -g npm
3. npm install @angular/cli
4. ng update @angular/cli
5. npm install --save-dev @angular/cli@latest
6. ng update @angular/cli
7. ng update @angular/core
8. ng update @angular/material
9. ng update
10. npm install -g rxjs-tslint
11. rxjs-5-to-6-migrate -p src/tsconfig.app.json
12. npm uninstall rxjs-compat
13. cerrar y abrir visual code

https://blog.ng-classroom.com/blog/angular/Angular-upgrade/?utm_source=browser&utm_medium=push_notification&utm_campaign=PushCrew_notification_1525897317&pushcrew_powered=1