without writing media queries How to make responsive component

 Follow these steps to implement a responsive design with Angular:

go to main refrence

• use the Angular BreakpointObserver to detect the size of the current device
• set member variables in your component that allow you to show or hide certain elements depending on the screen size
• Set responsive CSS classes in your component like is-phone-portrait depending on the screen size
• Use these special classes to make the CSS of your component responsive without writing media queries
• In this post, we will cover the following topics:
• The BreakpointObserver Service
• Using layout-related flags to show or hide responsive elements
• Writing CSS that only applies to certain screen sizes (without media queries)
• Summary
•  let's get started learning everything that we need to know for making your Angular application responsive!

The BreakpointObserver Service

@Component()
	export class ResponsiveComponent implements OnInit {
	constructor(private responsive: BreakpointObserver) {
	}
	ngOnInit() {
	this.responsive.observe(Breakpoints.HandsetLandscape)
	.subscribe(result => {
	if (result.matches) {
	console.log("screens matches HandsetLandscape");
	}
	});
	}
	} import {Breakpoints} from '@angular/cdk/layout'; console.log('Web ' + Breakpoints.Web); console.log('WebLandscape ' + Breakpoints.WebLandscape); console.log('WebPortrait ' + Breakpoints.WebPortrait); console.log('Tablet ' + Breakpoints.Tablet); console.log('TabletPortrait ' + Breakpoints.TabletPortrait); console.log('TabletLandscape ' + Breakpoints.TabletLandscape); console.log('Handset ' + Breakpoints.Handset); console.log('HandsetLandscape ' + Breakpoints.HandsetLandscape); console.log('HandsetPortrait ' + Breakpoints.HandsetPortrait); console.log('XSmall ' + Breakpoints.XSmall); console.log('Small ' + Breakpoints.Small); console.log('Medium ' + Breakpoints.Medium); console.log('Large ' + Breakpoints.Large); console.log('XLarge ' + Breakpoints.XLarge);