#10 Programando un sistema de ventas real | Solicitudes http post, ngModel y Dialog de Angular

#programación #hdeleon #curso
En este video te enseñare como puedes realizar solicitudes http post hacia un servicio web, como utilizar dialogs de material y como enlazar un atributo de clase por medio de ngModel, todo esto en angular.
Si quieres apoyarme y darme para una cerveza puedes hacerlo por aquí: paypal.me/Hecto...
Puedes apoyarme desde 0.5 USD al mes uniéndote como miembro al canal aquí: / @hdeleonnet
También puedes vía patreon: / powerhdeleon
Todos los videos de este curso: • Programando un sistema...
Comando para crear Entity Framework: Scaffold-DBContext "Server=localhost;Database=VentaReal;Trusted_Connection=True;" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models
Todos mis podcasts: • Podcast #1 - ¿Cuál es ...
Curso de MVC .Net: • Curso de MVC .Net C#| ...
Curso de MVC Api .Net: • Curso de MVC API .Net ...
Curso de facturación electrónica en c# .Net: • ¿Cómo convertir archiv...
Todos mis videos sobre facturación electrónica: • ¿Cómo convertir archiv...
La falta de respeto tanto a mí como a cualquier otra persona y el SPAM son razones de bloqueo en mi canal.
"Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use"
---------------------------------------------------------------------------------------------------------------
Sigueme en twitter ⇒ / powerhdeleon
Sigueme en facebook ⇒ / hdeleon666
Mi Sitio web ⇒ hdeleon.net

[@hdeleonnet]

Me ayudarías bastante si le das me gusta y compartes, eso ayuda más de lo que tu crees. Siguiente video: kzbin.info/www/bejne/b6DPZmyFiqegpdE

[@deckerfletcher6611]

A trick : watch movies on flixzone. I've been using them for watching loads of movies these days.

[@kannonbradley9068]

@Decker Fletcher yea, I've been watching on flixzone} for years myself :D

[@rileyeverett4186]

@Decker Fletcher Yup, I've been watching on Flixzone} for since december myself =)

[@jorgemachado1168]

Muchas gracias HECTOR por el tutorial, excelente forma de explicar, eres un mostro, saludos desde Colombia 🤘🤘🤘

[@adriantalavera6299]

excelete Hector, muchisimas gracias por compartir tus conocimientos

[@adlermatos4141]

Gracias por tomarte el tiempo de enseñar, estoy siguiendo uno a uno los videos del curso. Eres un Crack!! saludos!

[@noxius354]

QUE HERMOSA ES LA PROGRAMCION! Gracias bro me has ayudado muchisimo

[@fernandorochaolivera2404]

Es increíble como puedes ver un video de 32 minutos y no aburrirte a pesar de que es información muy pesada. Gracias por el curso ahora me subscribo.

[@hdeleonnet]

Muchas gracias Fernando

[@felipelopez4279]

en los 3 últimos minutos cuando editas el archivo "dialogcliente.component.ts", hay que poner que la variable nombre sea nullable en .NET6, de lo contrario tenemos error: public nombre!: string;

[@walterlam5857]

Sos un crack, tus cursos me estan enseñando bastaste. Porfa sigue con ellos.

[@tomasconelli]

Es un curso demasiado bueno, muy bien explicado. Muchas gracias por tu dedicación.

[@wilebaldomoratperez7153]

Hola Héctor, tus cursos son una obra maestra. Siempre he querido aprender Angular u otro framework tipo js y no he podido hacerlo por el tiempo y por no quererme salir de C# jaja Realmente es contenido de alta calidad y de muy alto valor el que aportas a una comunidad que desea aprender más y más cada día. Si hubiera más canales como el tuyo en KZbin, neta ya hubiera existido KZbin 2 jajaja ¡Grande hermano!

[@lautarogalvan7695]

Muchisimas gracias por tus cursos Hector!!!!!!!!

[@crisssaavedra4488]

Hola Héctor, gracias por el vídeo continúa con este curso porfa, saludos desde Perú

[@reybertpenuela2466]

Héctor amigo, enseñas super bien! Me encantan tus vídeos! No sabía nada de angular y contigo estoy aprendiendo y lo mejor es que entiendo cada cosa que explicas. Muchas gracias bro! Sigue así! Sos un crack!

[@devcodelearn9154]

Gracias por estos tutoriales Hector, eres un crack!!.

[@waltertorres5699]

Excelente vídeo y el detalle ni hablar felicitaciones gracias por compartir conocimiento.

[@edwinoswaldorodriguezleton5437]

a esperar el siguiente, excelente contenido Hector.

[@juandiegodurango4715]

Amo este curso, eres un crack!!!

[@Alejandroyt555]

Buen dia excelente curso amigo de Leon.... gracias por compartir tus conocimientos....

[@123pedro8]

Gracias. Muy didáctico. A veces corres más de lo que te puedo seguir, pero para eso está el pause. Lo de que "con los espacios se pone roñoso" es una expresión genial. La comprendí después de perder un buen rato intentando descifrar porqué al compilar me decía que mi dialogcliente.component.ts no era un módulo. :)

[@josealfonsocastrocantillo5918]

Exelente contenido y muy bien explicado, los videos me ayudaron a mejorar cosas en mis codigos

[@vladihack]

Hector, excelente contenido, estoy siguiendo el curso uno por uno. No conocía nada de Angular (ni TypeScript) pero ahora me estoy familiarizando cada vez mas. Un saludo grande desde Ecuador

[@juanfelipejaramilloarcila7729]

Excelente material. Muchas gracias.

[@diegoacosta1678]

Excelente Vídeo, apenas estoy aprendiendo Angular esta muy bueno!

[@gomz810]

¡Que gran contenido, Hector ! muy buen material.

[@TheKarlGamesFull]

Le haré spam a mis amigos para que vean los vídeos. Estoy adorando este curso

[@hdeleonnet]

Esos spam se agradecen

[@edelcortes7074]

De repente como que me pierdo, pero sigo en el camino! De pronto parece muy rebuscado pero ya que le agarras la onda, es una chulada esto del Angular! :D

[@f1c018]

Gracias maquina ! saludos dsd Bolivia!

[@arysanchaz2897]

Excelente el curso...

[@tarralover7636]

Gracias por compartir!

[@zuumstellar975]

Excelente tutorial

[@ddcooper19]

Gracias.

[@selvin_medina]

Muchas gracias Héctor!

[@nicolaslarrosa7154]

Excelente Hector!!

[@ae.h.h]

Muuuuuuuuy buen curso :D Gracias HL :D

[@luisjaviercruz1839]

Excelentes tutoriales, esperaré los siguientes y por supuesto me suscribo.

[@hdeleonnet]

Muchas gracias

[@devsoft]

Excelente

[@madeinchiapas]

Excelentes videos solo como observacion en la parte del width del dialog falto agregar el px al final "300px", saludos bro!

[@felixantoniodiazperalta1609]

Excelente hermano....

[@zavierquinde6006]

eres el amo:) .. excelente, como todos tus vídeos

[@leonardogabrielfloresfacun7703]

Muy Buen curso... Héctor desde hoy eres mi youtuber favorito... jaja pero llevo como 1 hora averiguando por que me envía los datos nulos al servidor...

[@munecrons9290]

Buenísimos tus videos, recién ando aprendiendo y tenia un error tonto, sucede que no me dejaba guardar mi tabla tiene más campos y los puse en mi interface y mande los parámetros en el método, pero no guardaba empecé a probar con console.log para ver donde estaba el error y sucede que no recibía 1 en exito sino 0, luego de casi 1 hora repitiendo tu video paso x paso me di cuenta que 1 parámetro tenia un máximo de 8 dígitos en mi bd y al parámetro en el método le puse 9 🤣🤣

[@edwinoswaldorodriguezleton5437]

Gracias Hector

[@hdeleonnet]

A ti

[@D4rkTaku]

Que frgon, se agradece el vídeo!

[@jorgeluismartinezsanchez5292]

buenos días Héctor excelente cada uno de tus videos, necesito ayuda con este error ya cheque en mas de una ocasión todo el video tratando de encontrar el error sin resultados el error es el siguiente ,espero que alguien me pueda ayudar Error: src/app/cliente/dialog/dialogcliente.component.ts:13:12 - error TS2564: Property 'nombre' has no initializer and is not definitely assigned in the constructor. 13 public nombre: string; Gracias.

[@diegorp545]

ve a tsconfig.json y escribe "strictPropertyInitialization": false

[@enriquerivera814]

Excelente, Hector, pregunta para lo que somos nuevos en angular, cual debería ser nuestra ruta de aprendizaje, entre Material - PrimeNg y BootStrap

[@juanpablotapiasuana9679]

Dónde está el botón de : "Me Excita!!!" Muy buen contenido :D

[@fernandosanchez3199]

Tengo problema con este error: Access to XMLHttpRequest at 'localhost:44300/api/cliente/' from origin 'localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[@hdeleonnet]

Te recomiendo ver el video nuevamente ya qie ahi de explica cors

[@fernandosanchez3199]

@@hdeleonnet ya pude solucionarlo agregando esto: builder.WithOrigins("*").AllowAnyHeader().AllowAnyMethod(); ahora si a continuar con los videos pendientes

[@ceops1000]

@@hdeleonnet hola creo que si hace falta poner una anotación de lo que menciona @Fernando Sánches, me sucedio lo mismo en Visual Studio 2017 y lo que mencionas de el cors no funciona en la misma, hay que agregar la linea : builder.WithOrigins("*").AllowAnyHeader().AllowAnyMethod(); saludos, muchas gracias por tus videos explicas super bien sin darle tantas vueltas a las cosas

[@danielmeza7156]

🔥

[@cristhianarielperezheredia6521]

Buen dia Hector, consulta: Para publicar este tipo de proyectos en un hosting, que el frontend este en angular y el backend con un servicio de web api de .net framework, en el hosting solo se necesita tener el framework instalado o se necesita algo de angular? Espero tu pronta respuesta.-saludos

[@hdeleonnet]

para .net framework vas a necesitar que el host sea de windows, si fuera core puede ser linux, y respecto a angular, esto transpilado es js y html así que no hay problema

[@cristhianarielperezheredia6521]

@@hdeleonnet perfecto hector muchas gracias

[@cristhianarielperezheredia6521]

Otra duda, en el caso de q el servidor sea linux, como se hace con la base de datos? Sql corre en linux? O hay q cambiar a mysql?

[@juliobrome7269]

Héctor muchas gracias!!! presente un inconveniente con los CORS en la solitud http por método POST, con el método GET me fue bien , que puede ser ??

[@bacuma1962]

Hola Hector; primeramente te envío un saludo desde Hermosillo, Sonora; después de felicitarte por tu curso, tengo una pregunta: en el método add(cliente: Cliente), etc. en la parte de "return this._http.post(this.url,cliente, httpOption);"; me marca el siguiente error: src/app/services/apiclientes.service.ts:33:1 - error TS2322: Type 'Observable' is not assignable to type 'Observable'. Type 'ArrayBuffer' is missing the following properties from type 'Response': exito, mensaje, data. ya estan importadas las interfaces apiclientesservice.ts. import { Cliente } from '../models/cliente'; import { Response } from '../models/response'; No he podido corregir el error. Me puedes ayudar? Saludos

[@hdeleonnet]

Intenta aplicando ng serve nuevamente

[@bacuma1962]

@@hdeleonnet gracias por tu atención; ya lo hice varias veces. El código es igual al tuyo.

[@bacuma1962]

ya resolvi el problema. gracias. Ay te envío un litro de bacanora.

[@Albodecorazon11]

@@bacuma1962 hola bro, como resolviste el error?

[@michaelsuescun4157]

@@Albodecorazon11 a mi el error me ocurría por tener la "h" de headers en mayúscula const httpOption = { Headers: new HttpHeaders({ 'contend-type': "application/json" }) }

[@chikitaamaral8893]

Hola Héctor, tengo una consulta, por favor si me puedes ayudar. Resulta que el botón "Guardar" si graba correctamente, pero con las líneas que hace que refresque la lista, a mi no me funciona, es decir, graba "patito n" pero no refresca la lista en la pantalla. He revisado el código y sí está como el del video. ¿ Hay alguna forma de saber porqué no me refresca? Muchas gracias!!! Tus videos son muy buenos!!

[@alexcastan_]

Hola Héctor me han gustado muchos tus videos, ya tienes un nuevo suscriptor y tengo que buscar porque hay mucha información importante en tus videos, actualmente tengo un problema y llevo días buscando información y creo y espero me puedas orientar con tu conocimiento, estoy haciendo una app movil con xamarin forms y mvvm, y la información la tiene que sacar de odoo que es un erp basado en phyton y postgresql pero no se como puedo conectar xamarin forms con odoo, ellos en su documentación dicen que a través de xml-rcp y jason-rcp pero solo soportan phyton, ruby, php y java, agradezco cualquier luz en el camino o si tienes un pequeño ejemplo me darías una alegría enorme, gracias por tu tiempo.

[@hdeleonnet]

vas a tener que utilizar xml-rcp, buscate un adapter en git, hay muchos, yo no tengo mucha experiencia con odoo pero si se que se puede conectar con muchas librerías que estan en nuget.

[@orizanosergio]

Hola Hector sabes me sale un error en el ClienteComponent me dice que error de contexto en el openAdd, veo que los código están igual no se si tendrás algún repositorio para comparar los código y ver donde está el error mio, gracias de antemano.

[@hdeleonnet]

En el sig video subo a repo

[@tomasizquierdomartinez1517]

Hola Sergio Orizano Salvador en el archivo de app.module.ts es necesario indicar que es un componente dinámico; agrega a tu archivo lo siguiente entryComponents y dentro declara los componentes de DialogClienteComponent, te debe quedar de la siguiente manera providers: [ ], bootstrap: [AppComponent], entryComponents:[ DialogClienteComponent ] Saludos!!!

[@devchar90]

@@tomasizquierdomartinez1517 gracias, tenia el mismo error que Sergio, me ayudó esa linea, saludos...

[@ericoramm]

Hola! Por qué será que material me funciona sobre la tabla pero no sobre los botones? Importé los modulos correspondientes pero al setear con color "primary" queda gris y pequeño. Muchas gracias. Felicitaciones por el trabajo.

[@ericoramm]

No dije nada. Bastó con detener y transpilar nuevamente.

[@hdeleonnet]

Siempre que se agregue algo al modulo principal va bien eso de volver al ng serve

[@kevinalejandro3391]

hola hector una pregunta, de mi servicio me llega una lista de datos bien, cuando veo los datos con el console.log() dentro la funcion que me consigue los datos me los muestra, pero esa variable se vuelve indefinida cuando quiero operar con ella fuera de la funcion, como puedo hacer para asignar valor a una variable en la funcion y el cambio persista?

[@hdeleonnet]

en tu clase de typescript hazla atributo class Algo{ public variable: any; metodo(){ this.variable= {'nombre':'patito'}; } metodo2(){ console.log(this.variable); } }

[@andresramirezsalazar9075]

Error: D:\Repos\AngularApi\AngularWeb\src\app\cliente\dialog\dialogcliente.component.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. at AngularCompilerPlugin.getCompiledFile (D:\Repos\AngularApi\AngularWeb ode_modules\@ngtools\webpack\src\angular_compiler_plugin.js:949:23) at D:\Repos\AngularApi\AngularWeb ode_modules\@ngtools\webpack\src\loader.js:43:31 at processTicksAndRejections (internal/process/task_queues.js:97:5) alguien sabra porque me sale este error, de antemano gracias

[@gogeta6485]

hector consulta y como podria ser para trabajar el modal en el mismo cliente.component.html?

[@hdeleonnet]

como el modal?

[@TitoFart]

Hector yo tengo una consulta y/o , porque mi bd registró los ID del 1,2,3 y saltó a 1002, 2002, 2003, etc?

[@hdeleonnet]

Bug de algunas versiones de sql server Las nuevas ya no pasa

[@TitoFart]

@@hdeleonnet entonces que recomiendas?, actualizar la bd? o seguir igual (utilizo el 2014)

[@hdeleonnet]

Si te es relevante. Nuevo sql server

[@hdeleonnet]

En realidad muchas veces no debería afectarte

[@WTFProductionOmg]

Que onda, a mi igual me pasaba, no afecta a un funcionamiento ni nada, pero se veia feo, al menos por el uso que yo le daba, segun investigue y lei es por que SQL guardaba las siguientes entradas en un cache, y al tener un cierre inesperado, se perdían, la solucion que yo encontre es usando la bandera -T272, por si quieres buscar acerca de ella.

[@maxdevs]

saludos una pregunta vas a implementar JWT en este proyecto?

[@hdeleonnet]

Asi es

[@vferdinand5]

Hola! me paso algo raro, en la primer prueba que hice cuando no actualizaba los datos al insertar, me inserto el dato correctamente, pero a la siguiente, el botón de guardar no hizo ninguna acción, ni tampoco marca error, revise el código y parece estar todo correcto

[@hdeleonnet]

Revisa tu bd. Si tu primary key esta en autoincrement

[@vferdinand5]

@@hdeleonnet Gracias por responder!! si, me faltaba eso, pero me imagino que debo crear nuevamente mi modelo con entity, cierto?

[@hdeleonnet]

asi es, utiliza el mismo comando con la opción al final -force

[@vferdinand5]

@@hdeleonnet Gracias, eres un crack!!

[@draagon123]

Que tal antes que nada, quisero felicitarte por el buen material que compartes, tengo una duda yo estoy siguiendo paso a paso el tutorial de angular pero al abrir el dialogo me sale el siguiente mensaje despues del evento click en el button: Error: No component factory found for ModalclienteComponent. Did you add it to @NgModule.entryComponents? pero no doy que pueda estar haciendo mal. Saludos.

[@hdeleonnet]

Si agregaste tu compomente a app.module?

[@draagon123]

@@hdeleonnet si, de hecho lo hice con ng g c en la carpeta dentro de cliente y esta correctamente importado en la sección de componentes

[@hdeleonnet]

Ya haz parado el proyecto y dado ng serve nuevamente?

[@draagon123]

@@hdeleonnet si, pero sigue mostrando este error en la consola despues de dar el evento click: ERROR Error: No component factory found for ModalClienteComponent. Did you add it to @NgModule.entryComponents? at noComponentFactoryError (core.js:25607) at CodegenComponentFactoryResolver.resolveComponentFactory (core.js:25683) at CdkPortalOutlet.attachComponentPortal (portal.js:535) at MatDialogContainer.attachComponentPortal (dialog.js:185) at MatDialog._attachDialogContent (dialog.js:870) at MatDialog.open (dialog.js:738) at ClienteComponent.openModal (cliente.component.ts:37) at Object.eval [as handleEvent] (ClienteComponent.html:5) at handleEvent (core.js:43993) at callWithDebugContext (core.js:45632)

[@draagon123]

Lo resolví agregando el componente al apartado "entryComponents" dentro del appModule, no se cual sea la diferencia, pero solo así pude visualizar correctamente el modal. Muchas gracias Hector por tomarte el tiempo de contestar, Saludos Capo!!

[@irrefl1672]

Bro hay una manera de conectar React y Angular?. NgModel es un concepto viejo?

[@hdeleonnet]

Microfrontends para lo primero. Ngmodel se sigue usando

[@kevinalejandro3391]

hola Hectoruna pregunta, estaba tratando de insertar una lista de datos para probar y, en el controlador salta un error de exceso de parametros, no se puede recibir una lista?, en mi caso mando el cliente y una lista de mascotas de ese cliente

[@hdeleonnet]

como mandas los datos, pega tu json para ver

[@kevinalejandro3391]

@@hdeleonnet el problema no es lo que envio desde angular(todavia no pude probar eso jajaa) el problema es que no inicia el back end me sale esto :'CoreEco.Controllers.ClienteController.Addmascotas (CoreEco)' has more than one parameter that was specified or inferred as bound from request body. Only one parameter per action may be bound from body. Inspect the following parameters, and use 'FromQueryAttribute' to specify bound from query, 'FromRouteAttribute' to specify bound from route, and 'FromBodyAttribute' for parameters to be bound from body: ClienteView cliente MascotasView[] mascotas' mi IActionResult es este y retorna el oRespuesta public IActionResult Addmascotas(ViewModels.ClienteView cliente,ViewModels.MascotaView[ ] mascotas)

[@kevinalejandro3391]

buenas Hector para que pueda iniciar el proyecto back end tuve que agregar [FromQuery]ViewModels.MascotasView mascotas[ ], no se como funciona, probe enviando un Json a mi primer parametro que es de tipo cliente y me funciona bien desde el postman, pero desde angular parece que no se envian en formato Json

[@hdeleonnet]

Deberia enviarse en Json. Ya agregaste el header content-type application/json?

[@kevinalejandro3391]

@@hdeleonnet si, mi metodo de envio es este sendMascotas(cliente:Cliente,mascotas:Mascota[]): Observable{ return this._http.post(this.urlMascotas+'?cliente='+cliente+'&mascotas='+mascotas, httpOption); } y el httpOption es const httpOption ={ headers: new HttpHeaders({ 'Contend-Type': 'aplication/json' }) }; como describiste en el video

[@capb123]

Me sale este error al clicker en GUARDAR: Access to XMLHttpRequest at 'localhost:44355/api/cliente' from origin 'localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. y si seguí los puntos que se cambiaba en el Backend, aunque estoy usando visual 2017 net core no se si eso sea el problema help!!!

[@JuanSanchez-hf4tq]

Agrega esta línea en el Startup.cs builder.WithMethods("*");

[@wilmersanchez2692]

prueba con este cambio en Configuration del archivo Startup.cs del servicio builder.WithOrigins("*").AllowAnyHeader().AllowAnyMethod();

[@fernandosanchez3199]

@@wilmersanchez2692 Gracias, si tuve el mismo error y funciono así

[@xoxies]

todo nuevo para mí, :S no entendí casi

[@fjr519]

No me sirve el ngModel con materialize :c

[@hdeleonnet]

Ya agregaste formsmodule?

[@efyse]

Hola amigo como estas ..... Ayudame porfavor

La programación te enseña con errores, me demore mas de 1 hora resolviendo el modal, en vez de click escribí clic. Bueno gajes del aprendiz y novato.

[@diegorp545]

Para aquellos que tengan problemas con la inicializacion te public name: string; Vayan a tsconfig.json y agregen el siguiente parametro: "strictPropertyInitialization": false

[@dertwelon6318]

me salvaste bro graciasss