Angular

Angular Ng-bootstrap

@ng-bootstrap/ng-bootstrap官網

安裝語法

1
ng add @ng-bootstrap/ng-bootstrap

錯誤訊息 Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

The plugin “angular-sass” was triggered by this import

angular:styles/global:styles:2:8:
  2 │ @import 'src/styles.scss';
    ╵         ~~~~~~~~~~~~~~~~~
處理方式 angular.json/ "projects": { "vite_angular19_st_project": { "architect": { "build": { "options": { 加在這裡 } } } } } 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
"projects": {
	"vite_angular19_st_project": {
		 "architect": {
			 "build": {
				"options": {
＋新增在這裡
					"stylePreprocessorOptions": {
						"sass": {
						"silenceDeprecations": [
							"mixed-decls",
							"color-functions",
							"global-builtin",
							"import"
						]
						}
					},
＋
			 }
		 }
	}
}

新增
 "stylePreprocessorOptions": {
    "sass": {
        "silenceDeprecations": [
			"mixed-decls", 
			"color-functions", 
			"global-builtin", 
			"import"
		]
    }
},

錯誤訊息 [ERROR] Can’t find stylesheet to import.

✘ [ERROR] Can’t find stylesheet to import.
╷
1 │ @use ‘bootstrap/scss/bootstrap’;

處理方式 安裝 bootstrap，如果安裝完成package.json 會出現”dependencies” 內 “bootstrap”: “^5.3.5”,”@popperjs/core”: “^2.11.8”,

1
npm install --save bootstrap

styles.scss引入 bootstrap

1
@use 'bootstrap/scss/bootstrap';

測試Html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<ng-template #content let-modal>
	<div class="modal-header">
		<h4 class="modal-title" id="modal-basic-title">Profile update</h4>
		<button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
	</div>
	<div class="modal-body">
		<form>
			<div class="mb-3">
				<label for="dateOfBirth">Date of birth</label>
				<div class="input-group">
					<input
						id="dateOfBirth"
						class="form-control"
						placeholder="yyyy-mm-dd"
						name="dp"
						ngbDatepicker
						#dp="ngbDatepicker"
					/>
					<button class="btn btn-outline-secondary bi bi-calendar3" (click)="dp.toggle()" type="button"></button>
				</div>
			</div>
		</form>
	</div>
	<div class="modal-footer">
		<button type="button" class="btn btn-outline-secondary" (click)="modal.close('Save click')">Save</button>
	</div>
</ng-template>

<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>

<hr />

<pre>{{ closeResult() }}</pre>

TS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import { Component, inject, signal, TemplateRef, WritableSignal } from '@angular/core';

import { ModalDismissReasons, NgbDatepickerModule, NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
	selector: 'ngbd-modal-basic',
	imports: [NgbDatepickerModule],
	templateUrl: './modal-basic.html',
})
export class NgbdModalBasic {
	private modalService = inject(NgbModal);
	closeResult: WritableSignal<string> = signal('');

	open(content: TemplateRef<any>) {
		this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then(
			(result) => {
				this.closeResult.set(`Closed with: ${result}`);
			},
			(reason) => {
				this.closeResult.set(`Dismissed ${this.getDismissReason(reason)}`);
			},
		);
	}

	private getDismissReason(reason: any): string {
		switch (reason) {
			case ModalDismissReasons.ESC:
				return 'by pressing ESC';
			case ModalDismissReasons.BACKDROP_CLICK:
				return 'by clicking on a backdrop';
			default:
				return `with: ${reason}`;
		}
	}
}

Model範例