Tag: Angular

angular show version จาก package.json

บทความนี้เรามาดูวิธีการ show version ใน app โดยการดึงค่ามาจาก package.json กันครับ ใน tsconfig.json ให้เราเพิ่มส่วนนี้เข้าไปครับ จากนั้นใน app เราก็เพิ่มส่วนนี้เข้าไปเลย จากนั้นก็เอาไปโชว์ในหน้าแอพได้เลย

add google analytics ใน angular

บทความนี้ผมจะมาแอด google analytics ใน angular กันครับ เริ่มจากเราไปเอาโค้ดจากใน google analytics มาก่อน ที่ https://analytics.google.com/analytics/web จากนั้นเราก็เพิ่ม ใน index.html xxx แทนโค้ดเว็บคับ จากนั้นในส่วนของ body จากนั้นใน AppComponent ให้เราไปเพิ่ม เพียงแค่นี้เราก็ได้แล้ว

ลองใช้ ngx-echarts ใน Angular เพื่อสร้าง chart กัน

บทความนี้ผมลองสร้าง chart โดยใช้ ngx-echarts กันครับ แบบง่าย ๆ เราเริ่มกันเลยดีกว่า อันดับแรกก็ติดตั้งก่อน จากนั้นมาสร้าง chart ในโค้ดกัน ในส่วนของ HTML จากนั้นลองกำหนดขนาดให้มันหน่อย ใน scss จากนั้นใน ts ไฟล์ เราก็กำหนดข้อมูลให้มันเลย เพียงแค่นี้เราก็ได้ chart แล้ว ตามนี้ ลองนำไปใช้กันดูครับ เอกสารและเว็บหลักอยู่นี่ครับ https://xieziyu.github.io/ngx-echarts/#/home

‘mat-select’ is not a known element:

ผมได้ทำ angular แล้วก็ได้ทำการเอา select จาก material เข้ามาใช้ แล้วเกิด Error ดังนี้ ‘mat-select’ is not a known element: ตัวอย่างเต็ม ๆ คือ ตัวอย่างรุปเต็ม ๆ ก็จะประมาณนี้ วิธีการแก้ก็คือให้เราไปทำการ import module MatSelectModule เข้ามาในโปรเจ็คไฟล์ app.modules.ts ดังนี้ เพียงแค่นี้เราก็สามารถแก้ปัญหาได้แล้ว

‘mat-label’ is not a known element:

สวัสดีครับ บทความนี้ผมมาแนะวิธีการแก้ไขปัญหา ‘mat-label’ is not a known element: ใน Angular ครับ ซึ่งผมได้เพิ่ม select material และเกิด Error ขึ้นดังนี้ วิธีแก้ไขก็คือให้ไป import MatFormFieldModule ใน app.module.ts ครับ เพียงแค่นี้เราก็สามารถแก้ปัญหาได้แล้ว

Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’

สวัสดีครับ บทความนี้ ผมมานำเสนอวิธีการแก้ปัญหา Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’ ซึ่งผมได้เจอ เมื่อทำการเพิ่ม formGroup ลงไปใน Form ใน Angular ครับ ซึ่งปัญหาที่ผมพบก็จะมีประมาณนี้ ดังนั้นผมลองไปหาวิธีแก้ก็พบว่า ผมลืม import ReactiveFormsModule ตรง app.module.ts ดังนั้นผมก็ต้องไปแอดมันซัก ตามตัวอย่างโค้ดด้านล่าง เพียงแค่นี้เราก็สามารถแก้ปัญหาได้แล้ว

ติดตั้ง mdbootstrap ของ Angular

สวัสดีครับ บทความนี้ผมจะมาโน๊ตวิธีการติดตั้ง mdbootstrap ใน angular กันนะครับ ซึ่งเจ้าตัว mdbootstrap มันเป็น Material Design สำหรับ Bootstrap มีให้เลือกหลากหลายว่าเราจะใช้กับ framework ไหน ในที้นี้ผมจะนำมาใช้กับ angular ครับ เราไปติดตั้งกันก่อน ในที่นี้ผมจะทำการติดตั้งแบบ npm และทำการ config เองทั้งหมดนะครับ ก่อนอื่นเราก็ต้องสร้างโปรเจ็ค angular ขึ้นมาก่อน ตามคำสั่ง สำหรับใครที่มีอยู่แล้วก็ใช้ได้เลย แต่ต้องแน่ใจว่า style ของโปรเจ็คเป็นแบบ scss ถ้ายังไม่ใช่ก็เปลี่ยนได้ตามคำสั่งต่อ ๆ ไปครับ จากนั้นเมื่อได้แล้ว ให้เราเข้าไปที่โปรเจ็ค แล้วรันคำสั่งเพื่อเพิ่ม mdbootstrap เข้าไปใน project จากนั้นเราก็ไปเพิ่มโค้ดไป app.module.ts ดังนี้ จากนั้นให้เราไปเช็คในไฟล์ angular.json ว่าเป็น scss แล้วหรือไม่ ตามโค้ดด้านล่าง ถ้ายังไม่ใช่ให้เปลี่ยนไปเป็น scss เสีย

เริ่มต้นกับ Hello World Angular

สวัสดีครับ บทความนี้ ผมจะมาโน๊ตวิธีการ Hello World กับ Angular กันครับ ซึ่ง angular ก็เป็น framework ที่ได้รับความนิยมมากอันหนึ่ง ที่มีผู้สนับสนุนเบื้องหลังอย่าง google เป็น back up ดังนั้น บทความนี้เรามา Hello world กันก่อนดีกว่า เริ่มต้นกับเว็บนี้เลย https://angular.io/guide/setup-local ตามขั้นตอนเราก็ต้องติดตั้ง angular cli ก่อนครับ โดยใช้คำสั่งด้านล่าง อย่าลืมว่าต้องติดตั้ง node ก่อนนะครับ จากโค้ดด้านบน เราติดตั้ง angular cli แบบ global ดังนั้นเราสามารถเรียกใช้ได้ทุกที่ ต่อไปเราก็ Initial app โดยใช้คำสั่ง จากดค้ดด้านบน เราก็ new my-app ซึ่งเมื่อเรารันคำสั่งไปแล้วจะปรากฎ Folder my-app ขึ้นมา ตามคำสั่ง เราสามารถเปลี่ยน my-app