Angular Tips 3 : Menggunakan Sweetalert2 pada Angular 8

Posted on November 15, 2019 by admin

Untuk membuat sweetalert berfungsi pada aplikasi Angular 8, cara nya juga sama seperti dua tips sebelumnya. Langkah pertama, install sweetalert melalui npm : Install Sweetalert

npm i sweetalert2

1	npm i sweetalert2

Angular.json Tambahkan css dan js pada angular.json :

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css",
  "node_modules/sweetalert2/dist/sweetalert2.css",
  "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.min.js",
  "node_modules/sweetalert2/dist/sweetalert2.all.min.js",
  "node_modules/@fortawesome/fontawesome-free/js/all.min.js"
]

"styles": [

"node_modules/bootstrap/dist/css/bootstrap.min.css",

"src/styles.css",

"node_modules/sweetalert2/dist/sweetalert2.css",

"node_modules/@fortawesome/fontawesome-free/css/all.min.css"

"scripts": [

"node_modules/bootstrap/dist/js/bootstrap.min.js",

"node_modules/sweetalert2/dist/sweetalert2.all.min.js",

"node_modules/@fortawesome/fontawesome-free/js/all.min.js"

]

Modifikasi app.component.ts Modifikasi app.component.ts dengan import Swal from sweetalert dan OnInit component, karena kita ingin melihat apakah sweetalert berhasil diinstal Read more about Angular Tips 3 : Menggunakan Sweetalert2 pada Angular 8[…]

Angular Tips 2 : Menginstall Font Awesome pada Angular 8

Posted on November 15, 2019 by admin

Setelah di tips sebelumnya kita berhasil menginstall boostrap, saat ini kita akan menginstall font awesome untuk mengaktifkan icon. Install Font Awesome Seperti pada dokumentasinya di https://fontawesome.com/, untuk menginstall melalui npm adalah dengan perintah berikut:

npm install --save-dev @fortawesome/fontawesome-free

1	npm install --save-dev @fortawesome/fontawesome-free

Tambahkan file css dan js font awesome pada angular.json Selanjutnya, pada file angular.json tambahkan file berikut :

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css",
  "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.min.js",
  "node_modules/@fortawesome/fontawesome-free/js/all.min.js"
]

"styles": [

"node_modules/bootstrap/dist/css/bootstrap.min.css",

"src/styles.css",

"node_modules/@fortawesome/fontawesome-free/css/all.min.css"

"scripts": [

"node_modules/bootstrap/dist/js/bootstrap.min.js",

"node_modules/@fortawesome/fontawesome-free/js/all.min.js"

]

Restart Angular Restart Read more about Angular Tips 2 : Menginstall Font Awesome pada Angular 8[…]

Basic Tutorial CRUD pada Angular 8

Posted on November 11, 2019November 12, 2019 by admin

Di tutorial ini kita akan bersama-sama membuat proses CRUD pada Angular 8. Pada tutorial ini, yang dibutuhkan adalah Angular versi 8 untuk membuat frontendnya, dan Laravel untuk membuat web servicenya. Tabel yang digunakan adalah mysql, nama database bebas, nama tabel yang akan kita gunakan adalah tabel employee :

CREATE TABLE `employee` (
  `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
  `first_name` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `last_name` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `email` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `status` int(11) DEFAULT 1,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

CREATE TABLE `employee` (

`id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,

`first_name` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,

`last_name` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,

`email` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,

`status` int(11) DEFAULT 1,

`created_at` timestamp NULL DEFAULT NULL,

`updated_at` timestamp NULL DEFAULT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

Membuat Web Service dengan Laravel Buat Read more about Basic Tutorial CRUD pada Angular 8[…]

indocoder.com

Tag: angular 8

Angular Tips 3 : Menggunakan Sweetalert2 pada Angular 8

Angular Tips 2 : Menginstall Font Awesome pada Angular 8

Basic Tutorial CRUD pada Angular 8