Angular MCQs with Code Snippets

1. What will the following code output?

1@Component({

2 selector: 'app-root',

3 template: '<h1>{{ title }}</h1>'

4})

5export class AppComponent {

6 title = 'Hello, Angular!';

7}

A) Hello, Angular!
B) app-root
C) Undefined
D) Error
““

2. What does the following code do?

1@Injectable({

2 providedIn: 'root'

3})

4export class DataService {

5 getData() {

6 return ['Data1', 'Data2'];

7 }

8}

A) Fetches data from an API

B) Provides data to components
C) Stores data in local storage
D) None of the above
““

3. What will happen if you run the following code?

““

““

1@Component({

2 selector: 'app-example',

3 template: '<div *ngIf="isVisible">Visible</div>'

4})

5export class ExampleComponent {

6 isVisible = true;

7}

A) Displays "Visible"
B) Displays nothing
C) Throws an error
D) Displays "isVisible"
““

4. What does the following code represent?

““

““

1@Component({

2 selector: 'app-child',

3 template: '<p>{{ message }}</p>'

4})

5export class ChildComponent {

6 @Input() message: string;

7}

A) A service
B) A directive
C) A child component that receives data
D) A parent component
““

5. What will the following code output?

““

1@Component({

2 selector: 'app-root',

3 template: '<button (click)="increment()">Increment</button><p>{{ count }}</p>'

4})

5export class AppComponent {

6 count = 0;

7 increment() {

8 this.count++;
9 }

10}

A) 0
B) 1
C) Increments count on button click
D) Displays an error
““

6. What does the following code do?

““

““

1@NgModule({

2 declarations: [AppComponent],

3 imports: [BrowserModule],

4 bootstrap: [AppComponent]

5})

6export class AppModule {}

A) Defines a service
B) Configures the root module
C) Creates a component
D) None of the above
““

7. What will the following code do?

““

““

1@Component({

2 selector: 'app-root',

3 template: '<input [(ngModel)]="name" /> <p>Hello, {{ name }}!</p>'

4})

5export class AppComponent {

6 name = '';

7}

A) Displays "Hello, !"

B) Displays "Hello, [input value]!"
C) Displays an error
D) None of the above
““

8. What does the following code do?

““

““

1@Component({

2 selector: 'app-root',

3 template: '<ul><li *ngFor="let item of items">{{ item }}</li></ul>'

4})

5export class AppComponent {

6 items = ['Item 1', 'Item 2', 'Item 3'];

7}

A) Displays a list of items

B) Displays an error
C) Displays nothing
D) Displays "Item 1, Item 2, Item 3"
““

9. What will the following code output?

““

““

1@Component({

2 selector: 'app-root',

3 template: '<div [ngClass]="{ active: isActive }">Content</div>'

4})

5export class AppComponent {

6 isActive = true;

7}

A) Content with class "active"

B) Content without class
C) Throws an error
D) Content with class "inactive"
““

10. What does the following code do?

““
““

1@Component({

2 selector: 'app-root',

3 template: '<button (click)="toggle()">Toggle</button><p *ngIf="isVisible">Visible</p>'

4})

5export class AppComponent {

6 isVisible = false;

7 toggle() {

8 this.isVisible = !this.isVisible;

9 }

10}

11. What will the following code output?

““

““

1@Component({

2 selector: 'app-root',

3 template: '<h2>{{ title | uppercase }}</h2>'

4})

““

““

1 export class AppComponent {

2 title = 'hello angular';

3 }

4 ```

5 A) HELLO ANGULAR

6 B) hello angular

7 C) Error
8 D) Hello Angular

9 **Answer:** A

10

1112. **What does the following code do?**

12 ```” “

13 @Component({

14 selector: 'app-root',

15 template: '<input [(ngModel)]="age" type="number" /> <p>Your age is {{ age }}</p>'

16 })

17 export class AppComponent {

18 age: number;

19 }

20 ```

21 A) Displays "Your age is undefined"

22 B) Displays "Your age is 0"

23 C) Displays the input age

24 D) Throws an error

25 **Answer:** C

26

2713. **What will the following code do?**

28 ```” “

29 @Component({

30 selector: 'app-root',

31 template: '<button (click)="addItem()">Add Item</button><ul><li *ngFor="let item of items">{{

item }}</li></ul>'

32 })

33 export class AppComponent {

34 items = [];

35 addItem() {

36 this.items.push('New Item');

37 }
38 }

39 ```

40 A) Displays "New Item" on button click

41 B) Displays nothing

42 C) Throws an error

43 D) Displays "Item 1, Item 2"

44 **Answer:** A

45

4614. **What does the following code represent?**

47 ```” “

48 @Component({

49 selector: 'app-root',

50 template: '<p>{{ getGreeting() }}</p>'

51 })

52 export class AppComponent {

53 getGreeting() {

54 return 'Hello, World!';

55 }

56 }

57 ```

58 A) Displays "Hello, World!"

59 B) Displays nothing

60 C) Throws an error

61 D) Displays "getGreeting()"

62 **Answer:** A

63

6415. **What will the following code output?**

65 ```” “

66 @Component({

67 selector: 'app-root',

68 template: '<div [style.color]="color">Colored Text</div>'

69 })

70 export class AppComponent {

71 color = 'blue';

72 }

73 ```

74 A) Colored Text in blue

75 B) Colored Text in red

76 C) Throws an error

77 D) Displays nothing

78 **Answer:** A

79

8016. **What does the following code do?**

81 ```” “

82 @Component({

83 selector: 'app-root',

84 template: '<input #inputElement /><button

(click)="logValue(inputElement.value)">Log</button>'

85 })

86 export class AppComponent {

87 logValue(value: string) {

88 console.log(value);

89 }

90 }

91 ```

92 A) Logs the input value to the console

93 B) Displays an error

94 C) Does nothing

95 D) Logs "undefined"

96 **Answer:** A

97

9817. **What will the following code output?**

99 ```” “

100 @Component({

101 selector: 'app-root',

102 template: '<p *ngIf="isVisible; else elseBlock">Visible</p><ng-template #elseBlock><p>Not

Visible</p></ng-template>'

103 })

104 export class AppComponent {

105 isVisible = false;

106 }

107 ```

108 A) Visible

109 B) Not Visible

110 C) Throws an error

111 D) Displays nothing

112 **Answer:** B

113

11418. **What does the following code do?**

115 ```” “

116 @Component({

117 selector: 'app-root',

118 template: '<button (click)="reset()">Reset</button><p>{{ count }}</p>'

119 })

120 export class AppComponent {

121 count = 10;

122 reset() {

123 this.count = 0;

124 }

125 }

126 ```

127 A) Resets count to 0 on button click

128 B) Displays count as 10

129 C) Throws an error

130 D) Displays nothing

131 **Answer:** A

132

13319. **What will the following code output?**

134 ```” “

135 @Component({

136 selector: 'app-root',

137 template: '<p>{{ items.length }}</p>'

138 })

139 export class AppComponent {

140 items = ['Item 1', 'Item 2', 'Item 3'];

141 }

142 ```

143 A) 3

144 B) 0

145 C) Undefined

146 D) Error

147 **Answer:** A

148

14920. **What does the following code do?**

150 ```” “

151 @Component({

152 selector: 'app-root',

153 template: '<input [(ngModel)]="username" /><p>Welcome, {{ username }}!</p>'

154 })

155 export class AppComponent {

156 username = '';

157 }

158 ```

You
 21. What will the following code output?

““

““

1@Component({

2 selector: 'app-root',

3 template: '<button (click)="toggle()">Toggle</button><p *ngIf="isVisible">Visible</p>'

4})

5export class AppComponent {

6 isVisible = false;

7 toggle() {

8 this.isVisible = !this.isVisible;

9 }

10}

A) Displays "Visible"
B) Displays nothing
C) Displays "Toggle"
D) Throws an error
“ “ (Initially displays nothing, but toggles to display "Visible" on button click)

22. What does the following code do?

““

““

1@Component({

2 selector: 'app-root',

3 template: '<input [(ngModel)]="email" type="email" /><p>Your email is {{ email }}</p>'

4})

5export class AppComponent {

6 email: string;

7}

A) Displays "Your email is undefined"

B) Displays the input email
C) Displays an error
D) Displays nothing
““

23. What will the following code output?

““

““

1@Component({

2 selector: 'app-root',

3 template: '<p>{{ getFullName() }}</p>'

4})

5export class AppComponent {

6 firstName = 'John';

7 lastName = 'Doe';

8 getFullName() {

9 return `${this.firstName} ${this.lastName}`;

10 }

11}

A) John Doe
B) John
C) Doe
D) Error
““

24. What does the following code do?

““

““

1@Component({

2 selector: 'app-root',

3 template: '<button (click)="addItem()">Add Item</button><ul><li *ngFor="let item of

items">{{ item }}</li></ul>'

4})

5export class AppComponent {

6 items: string[] = [];

7 addItem() {

8 this.items.push('New Item');
9 }

10}

A) Displays "New Item" on button click

B) Displays nothing
C) Throws an error
D) Displays "Item 1, Item 2"
““

25. What will the following code output?

““

““

1@Component({

2 selector: 'app-root',

3 template: '<p>{{ value | json }}</p>'

4})

5export class AppComponent {

6 value = { name: 'Angular', version: 12 };

7}

A) { name: 'Angular', version: 12 }

B) Angular
C) 12
D) Error
““

26. What does the following code do?

““

““

1@Component({

2 selector: 'app-root',

3 template: '<input [(ngModel)]="searchTerm" /><p>Search: {{ searchTerm }}</p>'

4})

5export class AppComponent {

6 searchTerm: string;

7}

A) Displays "Search: undefined"

B) Displays the input search term
C) Displays an error
D) Displays nothing
““

27. What will the following code output?

““

““

1@Component({

2 selector: 'app-root',

3 template: '<button (click)="increment()">Increment</button><p>{{ count }}</p>'

4})

5export class AppComponent {

6 count = 0;

7 increment() {

8 this.count++;

9 }

10}

A) Displays 0
B) Displays 1 on button click
C) Displays an error
D) Displays nothing
““

28. What does the following code do?

““

““

1@Component({

2 selector: 'app-root',

3 template: '<p>{{ isActive ? "Active" : "Inactive" }}</p>'

4})

5export class AppComponent {

6 isActive = true;

7}

A) Displays "Active"
B) Displays "Inactive"
C) Displays nothing
D) Throws an error
““

29. What will the following code output?

““

““

1@Component({

2 selector: 'app-root',

3 template: '<p>{{ items.length }}</p>'

4})

5export class AppComponent {

6 items = ['Item 1', 'Item 2', 'Item 3'];

7}

A) 3
B) 0
C) Undefined
D) Error
““