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

[@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 🤘🤘🤘

[@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;

[@adlermatos4141]

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

[@adriantalavera6299]

excelete Hector, muchisimas gracias por compartir tus conocimientos

[@noxius354]

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

[@lautarogalvan7695]

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

[@tomasconelli]

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

[@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

[@walterlam5857]

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

[@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!

[@waltertorres5699]

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

[@devcodelearn9154]

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

[@droneJul]

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. :)

[@TheKarlGamesFull]

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

[@hdeleonnet]

Esos spam se agradecen

[@crisssaavedra4488]

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

[@juandiegodurango4715]

Amo este curso, eres un crack!!!

[@Alejandroyt555]

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

[@edwinoswaldorodriguezleton5437]

a esperar el siguiente, excelente contenido Hector.

[@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!

[@juanfelipejaramilloarcila7729]

Excelente material. Muchas gracias.

[@diegoacosta1678]

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

[@josealfonsocastrocantillo5918]

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

[@arysanchaz2897]

Excelente el curso...

[@gomz810]

¡Que gran contenido, Hector ! muy buen material.

[@f1c018]

Gracias maquina ! saludos dsd Bolivia!

[@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

[@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

[@zuumstellar975]

Excelente tutorial

[@selvin_medina]

Muchas gracias Héctor!

[@tarralover7636]

Gracias por compartir!

[@madeinchiapas]

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

[@nicolaslarrosa7154]

Excelente Hector!!

[@luisjaviercruz1839]

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

[@hdeleonnet]

Muchas gracias

[@ae.h.h]

Muuuuuuuuy buen curso :D Gracias HL :D

[@felixantoniodiazperalta1609]

Excelente hermano....

[@zavierquinde6006]

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

[@enriquerivera814]

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

[@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 🤣🤣

[@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...

[@edwinoswaldorodriguezleton5437]

Gracias Hector

[@hdeleonnet]

A ti

[@ddcooper19]

Gracias.

[@devsoft]

Excelente

[@D4rkTaku]

Que frgon, se agradece el vídeo!

[@VirgilioRubioFlute]

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

[@VirgilioRubioFlute]

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

[@VirgilioRubioFlute]

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

[@MoisesDevelop]

@@VirgilioRubioFlute hola bro, como resolviste el error?

[@michaelsuescun4157]

@@MoisesDevelop 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" }) }

[@juanpablotapiasuana9679]

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

[@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 ??

[@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

[@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?

[@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.

[@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!!

[@danielmeza7156]

🔥

[@gogeta6485]

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

[@hdeleonnet]

como el modal?

[@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

[@maxdevs]

saludos una pregunta vas a implementar JWT en este proyecto?

[@hdeleonnet]

Asi es

[@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

[@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!!

[@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); } }

[@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...

[@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

[@irrefl1672]

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

[@hdeleonnet]

Microfrontends para lo primero. Ngmodel se sigue usando

[@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!!

[@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í

[@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

[@efyse]

Hola amigo como estas ..... Ayudame porfavor

[@xoxies]

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

[@fjr519]

No me sirve el ngModel con materialize :c

[@hdeleonnet]

Ya agregaste formsmodule?

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